CODEWITHSUNDEEP
htmlcssimagecentering
Chris
Chris

Reputation: 113

How do I center a group of photos

I'm trying to center the six photos below that are in the div "photos" inside the div "content" but I am unable to figure it out. Do I wrap them in another div? Any help would be great, as I'm still a novice (clearly).

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

Upvotes: 0

Views: 52

Answers (2)

Yuvraj Gupta
Yuvraj Gupta

Reputation: 2475

You can use center tag to center align your image.

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

Upvotes: -1

Quentin
Quentin

Reputation: 943480

Images are inline elements so (all else being equal):

.photos {
    text-align: center;
}

From the docs:

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

Upvotes: 2

Related Questions