如何使用CSS居中显示此内容？

Question

对于这个稍微模糊的问题，很抱歉，但内容是相当具体的。我已经尝试了许多不同的方法，我真的很努力地达到预期的结果。

因此，我有一个要显示的照片集合，这个集合将包含一张或两张照片。这些需要在页面上并排显示并居中显示。如果只有一张照片，那么它应该单独显示并居中显示在页面上。每张照片都有一个标题，上面需要显示，下面需要显示说明。

所以它要么看起来像这样(但居中)：

​

​

或者它看起来像这样(但居中)：

​

​

我使用过一个边距为auto 0的外部容器div，我也使用过表格，但我正在努力(a)使它们居中，然后(b)能够拥有一到两张照片(尽管我可以在代码中处理这个问题，因为这是一个MVC视图)。

我对CSS有点生疏了，所以非常感谢大家的帮助和建议！

Answer 1

解决这个问题的一种方法是对一个包含元素进行text-align:center并对子元素进行text-align:left，例如或下面的代码。

HTML

<ul>
    <li><h3>Title</h3><img src="http://lorempixel.com/150/150/abstract/1"/><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</p></li>
    <li><h3>Title</h3><img src="http://lorempixel.com/150/150/abstract/2"/><p>Description</p></li>
    <li><h3>Title</h3><img src="http://lorempixel.com/150/150/abstract/3"/><p>Description Description Description Description</p></li>
</ul>

CSS

ul {
    list-style-type:none;
    text-align:center;
}

li {
    text-align:left;
    display:inline-block;
    vertical-align:top;
    max-width:150px;
    margin-right:10px;
}

Answer 2

将它们放在一个容器中，这样如果没有两个图像，那么容器宽度就是一个图像的宽度，然后将此样式放在容器上：

margin: 0 auto;

或者将align='center'添加到容器

小提琴：http://jsfiddle.net/Hive7/c8p6G/

Answer 3

终于解决了！

.container {
    margin: 0 auto;
}

.photo{
    display: inline-block;
}

.detail {
    text-align: left;
}

<div class="container" align="center">
    <div class="photo">
        <div class="detail">TITLE</div>
        <div class="detail">
            <img src="http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg" width="200px" />
        </div>
        <div class="detail">Description</div>
    </div>
    <div class="photo">
        <div class="detail">TITLE</div>
        <div class="detail">
            <img src="http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg" width="200px" />
        </div>
        <div class="detail">Description</div>
    </div>
</div>

这是jsFiddle example。