Question

对于稍微模糊的问题道歉，但内容非常具体。我一直在玩很多不同的方法，我真的很难达到预期的效果。

所以我要展示一系列照片，这个系列要么有一张或两张照片。这些需要彼此并排显示并以页面为中心。如果只有一张照片，那么它应该单独显示并以页面为中心。每张照片都有一个需要在其上方显示的标题，以及需要在其下方显示的描述。

所以它看起来像这样（但是居中）：

Example of a single photo.

或者它看起来像这样（但是居中）：

Example of two photos.

我玩过一个带有自动0边距的外部容器div，我玩桌子，但我正在努力（a）让它们居中，然后（b）能够拥有一两张照片（虽然我可能会在代码中处理这个问题，因为这是一个MVC视图）。

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

Answer 1

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

margin: 0 auto;

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

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

Answer 2

终于解决了！

.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。

Answer 3

解决此问题的一种方法是text-align:center包含元素和text-align:left子项，例如see demo或下面的代码。

<强> 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 4

我更喜欢使用li代替div

<ul>
  <li>
      <h2> Title here</h2>
      <img src="img.jpg" alt="" />
      <p> descriptions here here</p>
  </li>
 <li>
      <h2> Title here</h2>
      <img src="img.jpg" alt="" />
      <p> descriptions here here</p>
  </li>
  <li>
      <h2> Title here</h2>
      <img src="img.jpg" alt="" />
      <p> descriptions here here</p>
  </li>
</ul>


ul{ display: block; text-align:center; }
ul li { display: inline-block; }

Answer 5

我回到我的CSS并立即意识到我尝试使用表格的解决方案有一些错误。这实际上非常简单！我仍然想知道这是否可以使用div标签，但是 - 我相信它会是。

通过以下内容，我可以选择是否输出第二个td ..

<table style="margin: 0 auto;">
    <tr>
        <td style="background: #EEEEEE">
            <div>Title</div>
            <div>PHOTO</div>
            <div>Description Description Description Description Description Description Description </div>
        </td>
        <td style="background: #AAAAAA">
            <div>Title</div>
            <div>PHOTO</div>
            <div>Description Description Description Description Description Description Description </div>
        </td>
    </tr>
</table>

如何使用CSS来集中此内容？

5 个答案: