如何将一组照片居中

Question

我试图将下面的六张照片放在 div "photos" 中的 div "content" 中，但我无法弄清楚。我是否将它们包裹在另一个 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.

Answer 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>

如何将一组照片居中

How do I center a group of photos

html

css

image

centering