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：

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

Answer 2

您可以使用中心标记来居中对齐图片。

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

如何将一组照片居中

2 个答案: