Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2003
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Centering div content

    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
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I am sure there is a better way to do it.
    Add
    div.clearfix div{text-align:center;}
    into your CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    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
    •