www.webdeveloper.com
Results 1 to 5 of 5

Thread: Centering div contents

Hybrid View

  1. #1
    Join Date
    Nov 2003
    Posts
    11

    Exclamation Centering div contents

    Hi:

    I am having trouble centering divs properly. The code I am using is below, but it seems redundant to me. I am sure there is a better way to do it.

    Code:
    <div class="clearfix">
    <div style="float: left; width: 25%;">
    <a href="the-family.html"><img src="images/stories/demo/mom_dad.png" width="162" height="110"  style="border: 0;" /></a><br />
    <h3  align=center>The Family</h3>
    <a href="the-family.html">Read more...</a>
    </div>
    <div style="float: left; width: 25%;">
    {arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624434792497" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/tehran-gallery.png" width="220" height="110" alt="tehran-gallery" title="Click for a slideshow." />
    <h3 align=center>The City of Tehran</h3>
    <p align=center>View the Gallery</p>{/arifancybox}
    </div>
    <div style="float: left; width: 25%;">
    {arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624564172740" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/rasht-gallery.png" width="220" height="110" alt="rasht-gallery" title="Click for a slideshow." />
    <h3 align=center>The City of Rasht</h3>
    <p align=center>View the Gallery</p>{/arifancybox}
    </div>
    <div style="float: left; width: 25%;">
    {arifancybox activeType="flickr" type="customtext" source="photoset" photosetId="72157624427151309" apikey="166cd0f079225ba7aa06e3ec838f6e62"}<img src="images/stories/galleries/gilan-gallery.png" width="220" height="110" alt="gilan-gallery" title="Click for a slideshow." />
    <h3 align=center>Gilan Province</h3>
    <p align=center>View the Gallery</p>{/arifancybox}
    </div>
    </div>
    Basically, I have a div which encloses 4 other divs. These 4 divs are each defined as "width: 25%", thus combined they take up 100% of the enclosing div.

    What I want is to center the content of each of those 4 divs. The content is both text and image.

    Should be a rather simple thing to do, and thus eliminate my need to individually center each element within the small 25% wide div.

    Any help would be appreciated.

    Thanks.

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    text-align:center will center all text content, and put a left and right margin of auto on all images. Something like this.
    Code:
    .clearfix {
        text-align:center;
    }
    .clearfix img {
        margin:0 auto;
    }

  3. #3
    Join Date
    Nov 2003
    Posts
    11
    Is there a way to do it inline and make all the contents of the div, regardless wether they are text, image or other elements centered?

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    Only for text.
    Code:
    <div class="clearfix" style="text-align:center;">
    ...
    </div>
    All images will need style="margin:auto;" individually.

  5. #5
    Join Date
    Aug 2010
    Posts
    7
    the bagground is need no-reapeat!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles