1

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

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

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

单张照片示例。

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

两张照片的例子。

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

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

4

5 回答 5

1

终于搞定了！

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

于 2013-07-17T08:26:54.250 回答
1

我更喜欢用 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; }
于 2013-07-17T08:54:55.700 回答
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;
}
于 2013-07-17T08:40:28.037 回答
1

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

margin: 0 auto;

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

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

于 2013-07-17T07:56:46.390 回答
0

我回到我的 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>
于 2013-07-17T07:59:34.933 回答