html - 如何将一组照片居中

Question

我试图将下面六张照片置于 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>

Answer 1

图像是行内元素，因此(其他条件相同):

.photos {
    text-align: center;
}

来自 the docs :

This property describes how inline-level content of a block container is aligned.