如何让一组照片居中答案

【问题标题】：How do I center a group of photos如何让一组照片居中
【发布时间】：2016-08-05 17:38:37
【问题描述】：

我试图将下面的六张照片放在 div“内容”内的 div“照片”中，但我无法弄清楚。我是否将它们包装在另一个 div 中？任何帮助都会很棒，因为我还是个新手（显然）。

<div class="wrapper clearfix">
    <h1>gage</h1>

<div class="menu-btn" id="menu-btn">
   <div></div>
   <span></span>
   <span></span>
   <span></span>

<div class="main-nav responsive-menu">
    <UL>
        <li><a href="#">about</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</div>
</div>

<div class="content"> 
    <div class="photos">
        <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
        <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
        <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
        <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
        <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
        <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
    </div>
</div>
</div>

<div id="footer">
    <P>More stuff</p>
</div>

【问题讨论】：

标签： html css image centering

【解决方案1】：

图片是内联元素，所以（其他都一样）：

.photos {
    text-align: center;
}

来自the docs：

此属性描述块容器的内联级内容如何对齐。

【讨论】：

谢谢！我有 .photos {display: inline;} 在那里，这把它搞砸了。删除并添加了 text-align:center ，世界上一切都很好。现在修复我无法使用的汉堡菜单。

【解决方案2】：

您可以使用 center 标签将图像居中对齐。

<div class="content"> 
<div class="photos">
    <center>
    <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
    <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
    <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
    <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
    <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
    <a href="google.html"><img src="25612060593_b222234b86_b.jpg"></a>
   </center>
 </div>
 </div>

【讨论】：

<center> 在 1997 年被弃用。这是一个错误的世纪使用它。
我知道它已被弃用，但对于新人来说仍然是一种简单的方法。