www.webdeveloper.com
Results 1 to 14 of 14

Thread: Need help on horizontally centering some <div>s

  1. #1
    Join Date
    Nov 2005
    Posts
    8

    Need help on horizontally centering some <div>s

    Hi all,

    Please take a look at my webpage:
    http://hk.geocities.com/saratara_me/testing.html

    As you can see, there are 5 icons and what I want to do is to horizontally center the icons. Each icon(including the title) is inside a <div> with the attribute float:left so that the icons line up horizontally but this attribute also make them floated to the left, which apparently is not what I want it to be.

    So how can I horizontally center them in the page?

    Here is the source code:

    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5" />
    
    <style type="text/css">
    div.category_icon_with_title{
    float:left;
    }
    </style>
    <title></title>
    
    </head>
    
    <body>
    
    <div id="testing" align="center"><!--I already tried to apply the align="center" attribute it didn't help-->
    
    <div class="category_icon_with_title">
    <a href="http://hk.yahoo.com">
    <img src="./images/bedroom_mouseout.jpg" alt="Bedroom" width="68" height="51" id="bedroom_img" title="Bedroom"/></a>
    <p>Bedroom</p>
    </div>
    
    <div class="category_icon_with_title">
    <a href="http://hk.yahoo.com">
    <img src="./images/dining_room_mouseout.jpg" id="dining_room_img" title="Dining Room" alt="Dining Room" width="68" height="51"/></a>
    <p>Dining Room</p>
    </div>
    
    <div class="category_icon_with_title">
    <a href="http://hk.yahoo.com">
    <img src="./images/entertainment_mouseout.jpg" id="entertainment_img" title="Entertainment" alt="Entertainment" width="68" height="51"/></a>
    <p>Entertainment</p>
    </div>
    
    <div class="category_icon_with_title">
    <a href="http://hk.yahoo.com">
    <img src="./images/office_mouseout.jpg" id="office_img" title="Office" alt="Office" width="68" height="51"/></a>
    <p>Office</p>
    </div>
    
    <div class="category_icon_with_title">
    <a href="http://hk.yahoo.com">
    <img src="./images/storage_mouseout.jpg" id="storage_img" title="Storage" alt="Storage" width="68" height="51"/></a>
    <p>Storage</p>
    </div>
    
    </div>
    </body>
    
    </html>
    Many thanks to you all.
    Last edited by iamsuperman; 11-30-2005 at 05:05 PM.

  2. #2
    Join Date
    Jan 2005
    Location
    USA
    Posts
    352
    Setting their margins to 0 auto; should work. If not, try putting them all in one div with a 0 auto margin.

    Here's the css for that :

    margin: 0px auto;

    You know what I'm sayin'?

  3. #3
    Join Date
    Nov 2005
    Posts
    8
    Quote Originally Posted by tgrk35
    Setting their margins to 0 auto; should work. If not, try putting them all in one div with a 0 auto margin.

    Here's the css for that :

    margin: 0px auto;

    You know what I'm sayin'?
    First of all, thank you very much for your reply!
    But it still didn't seem to work, after adding the "margin:0px auto;" like this:

    HTML Code:
    <style type="text/css">
    div.category_icon_with_title{
    float:left;
    margin:0px auto; // I added this line
    }
    </style>
    This is the URL of the my web page after adding "margin:0px auto;"
    http://hk.geocities.com/saratara_me/testing.html

    I also tried to add the "margin:0px auto;" to the parent <div> that contains the <div>s of icons like this:

    HTML Code:
    <div id="parent_div" style="margin:0px auto;">
    
    //the 5 <div>s are placed here
    
    </div>

    but this still doesn't help center the icons either.

    is there another way to center the icons?

    Thanks again!

  4. #4
    Join Date
    Jan 2005
    Location
    USA
    Posts
    352
    Try this:

    <div style="margin: 0px auto;">
    <img />
    <img />
    <img />
    </div>

    Try getting rid of those middle divs you have (category_icon_with_text). Let me know if this works.

  5. #5
    Join Date
    Nov 2005
    Posts
    8
    Quote Originally Posted by tgrk35
    Try this:

    <div style="margin: 0px auto;">
    <img />
    <img />
    <img />
    </div>

    Try getting rid of those middle divs you have (category_icon_with_text). Let me know if this works.

    After removing the middle divs and add the style="margin:0px auto;" to their parent div, it becomes like this:

    http://hk.geocities.com/saratara_me/testing.html

    The icons now line up vertically, which does not seem to work.

    Here is the source code:

    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5" />
    
    <style type="text/css">
    div.category_icon_with_title{ //I just leave it here
    float:left;
    margin: 0px auto;
    }
    </style>
    <title></title>
    
    </head>
    
    <body>
    
    <div id="testing" style="margin: 0px auto;">
    
    
    <a href="http://hk.yahoo.com">
    <img src="./images/bedroom_mouseout.jpg" alt="Bedroom" width="68" height="51" id="bedroom_img" title="Bedroom"/></a>
    <p>Bedroom</p>
    
    
    <a href="http://hk.yahoo.com">
    <img src="./images/dining_room_mouseout.jpg" id="dining_room_img" title="Dining Room" alt="Dining Room" width="68" height="51"/></a>
    <p>Dining Room</p>
    
    <a href="http://hk.yahoo.com">
    <img src="./images/entertainment_mouseout.jpg" id="entertainment_img" title="Entertainment" alt="Entertainment" width="68" height="51"/></a>
    <p>Entertainment</p>
    
    
    
    <a href="http://hk.yahoo.com">
    <img src="./images/office_mouseout.jpg" id="office_img" title="Office" alt="Office" width="68" height="51"/></a>
    <p>Office</p>
    
    
    
    <a href="http://hk.yahoo.com">
    <img src="./images/storage_mouseout.jpg" id="storage_img" title="Storage" alt="Storage" width="68" height="51"/></a>
    <p>Storage</p>
    
    
    </div>
    </body>
    
    </html>
    Last edited by iamsuperman; 12-01-2005 at 02:45 AM.

  6. #6
    Join Date
    Jan 2005
    Location
    USA
    Posts
    352
    Try this: (you can change the class names however you want)

    Code:
    <div class="main">
     <div class="category">
      <img src="url" alt="alt" />
      <br />
      Bedroom
     </div>
     <div class="category...
     
     [repeat the category divs with all your images just as this first one is formatted]
    
    </div>
    For your css, use this:
    Code:
    .main
    {
    margin: 0px auto;
    }
    
    .category
    {
    float: left;
    }
    Do that and tell me what it does .

  7. #7
    Join Date
    Nov 2005
    Posts
    8

    Smile

    Quote Originally Posted by tgrk35
    Try this: (you can change the class names however you want)

    Code:
    <div class="main">
     <div class="category">
      <img src="url" alt="alt" />
      <br />
      Bedroom
     </div>
     <div class="category...
     
     [repeat the category divs with all your images just as this first one is formatted]
    
    </div>
    For your css, use this:
    Code:
    .main
    {
    margin: 0px auto;
    }
    
    .category
    {
    float: left;
    }
    Do that and tell me what it does .

    Thanks! But the problem still remains and here is my updated webpage:

    http://hk.geocities.com/saratara_me/testing.html

    And the source code:

    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5" />
    
    <style type="text/css">
    .category{
    float:left;
    }
    
    .main
    {
    margin: 0px auto;
    }
    
    </style>
    <title></title>
    
    </head>
    
    <body>
    
    <div class="main">
    
    <div class="category">
    <a href="http://hk.yahoo.com">
    <img src="./images/bedroom_mouseout.jpg" alt="Bedroom" width="68" height="51" id="bedroom_img" title="Bedroom"/></a>
    <br />
    Bedroom
    </div>
    
    
    <div class="category">
    <a href="http://hk.yahoo.com">
    <img src="./images/dining_room_mouseout.jpg" id="dining_room_img" title="Dining Room" alt="Dining Room" width="68" height="51"/></a>
    <br />
    Dining Room
    </div>
    
    <div class="category">
    <a href="http://hk.yahoo.com">
    <img src="./images/entertainment_mouseout.jpg" id="entertainment_img" title="Entertainment" alt="Entertainment" width="68" height="51"/></a>
    <br />
    Entertainment
    </div>
    
    <div class="category">
    <a href="http://hk.yahoo.com">
    <img src="./images/office_mouseout.jpg" id="office_img" title="Office" alt="Office" width="68" height="51"/></a>
    <br />
    Office
    </div>
    
    <div class="category">
    <a href="http://hk.yahoo.com">
    <img src="./images/storage_mouseout.jpg" id="storage_img" title="Storage" alt="Storage" width="68" height="51"/></a>
    <br />
    Storage
    </div>
    
    </div>
    </body>
    
    </html>

  8. #8
    Join Date
    Jan 2005
    Location
    USA
    Posts
    352
    Hey, man, I'm trying to get this working, but I'm retarded apparently.

    I can get it so the images align properly, but to put text underneath them is a whole 'nother thing. Maybe someone will be able to help us out with this.

  9. #9
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    here is what i use

    CSS
    Code:
    #main {
        margin: 0% auto;
        width: 760px; /* without the width set it won't center */
    }
    HTML
    Code:
    <div id="main">some text...</div>

  10. #10
    Join Date
    May 2004
    Location
    dobson ave.
    Posts
    694
    Hi -
    Try adding a DOCTYPE! fixing the <head> - or see if this works:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Page Layout Fix</title>
    <style type="text/css">
    body{
    width:100%; height:100%; margin:0; padding:0; font-size:100%;
    text-align:center; background:white none;}
    div.contain{
    width:775px; margin:0 auto; font-family:"verdana", "geneva", sans-serif;}
    div.geocities{
    width:138px; margin:0; background:silver url("geodown.gif") no-repeat 0% 0%;
    height:300px; float:left;}
    div.category{
    width:637px; margin:0 auto; background:#ececec none; height:500px; float:left;}
    .category h1{
    color:blue; margin:0 auto; text-align:right; width:95%;}
    .category h4{
    color:black; background:white none; width:95%; margin:0 auto 15px auto;
    text-align:left;}
    .category p{
    width:100px; height:75px; margin:0 auto 0 15px; float:left; font-size:80%;}
    .category p a img{
    border:none;}
    a:link, a:visited{
    color:black; text-decoration:none;}
    a:focus, a:hover{
    color:#ff0033;}
    .main{
    margin: 0px auto;}
    </style>
    </head>
    <body>
    <div class="contain">
    <div class="geocities">
    </div>
    	<div class="category">
    	<h1>Whatnot Site</h1>
    	<h4>Categories</h4>
    	<p>
    	<a href="http://hk.yahoo.com/">
    	<img src="bedroom_mouseout.jpg" alt="Bedroom" id="bedroom_img"
    	title="Bedroom" height="51" width="68">
    	<br />
    	Bedroom</a>
    	</p>
    	<p>
    	<a href="http://hk.yahoo.com/">
    	<img src="dining_room_mouseout.jpg" id="dining_room_img"
    	title="Dining Room" alt="Dining Room" height="51" width="68">
    	<br />
    	Dining Room</a>
    	</p>
    	<p>
    	<a href="http://hk.yahoo.com/">
    	<img src="entertainment_mouseout.jpg" id="entertainment_img"
    	title="Entertainment" alt="Entertainment" height="51" width="68">
    	<br />
    	Entertainment</a>
    	</p>
    	<p>
    	<a href="http://hk.yahoo.com/">
    	<img src="office_mouseout.jpg" id="office_img" title="Office"
    	alt="Office" height="51" width="68">
    	<br />
    	Office</a>
    	</p>
    	<p>
    	<a href="http://hk.yahoo.com/">
    	<img src="storage_mouseout.jpg" id="storage_img" title="Storage"
    	alt="Storage" height="51" width="68">
    	<br />
    	Storage</a>
    	</p>
    	</div>
    	<br style="clear:both;" />
    </div>
    </body>
    </html>
    Good luck,
    El
    F-fox 2.0 :: US :: el design site :: 768 kbps :: WIN

  11. #11
    Join Date
    Nov 2005
    Posts
    8
    Quote Originally Posted by ShrineDesigns
    here is what i use

    CSS
    Code:
    #main {
        margin: 0% auto;
        width: 760px; /* without the width set it won't center */
    }
    HTML
    Code:
    <div id="main">some text...</div>
    Thank you very much for your reply.

    I tried to add the width:760px; like this:

    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=big5" />
    
    <style type="text/css">
    .category{
    float:left;
    }
    
    #main
    {
    margin: 0px auto;
    width: 760px;
    }
    
    </style>
    <title></title>
    
    </head>
    
    <body>
    
    <div id="main">
    
    <div class="category">
    <a href="http://hk.yahoo.com">
    <img src="./images/bedroom_mouseout.jpg" alt="Bedroom" width="68" height="51" id="bedroom_img" title="Bedroom"/></a>
    <br />
    Bedroom
    </div>
    
    
    <div class="category">
    <a href="http://hk.yahoo.com">
    <img src="./images/dining_room_mouseout.jpg" id="dining_room_img" title="Dining Room" alt="Dining Room" width="68" height="51"/></a>
    <br />
    Dining Room
    </div>
    
    <div class="category">
    <a href="http://hk.yahoo.com">
    <img src="./images/entertainment_mouseout.jpg" id="entertainment_img" title="Entertainment" alt="Entertainment" width="68" height="51"/></a>
    <br />
    Entertainment
    </div>
    
    <div class="category">
    <a href="http://hk.yahoo.com">
    <img src="./images/office_mouseout.jpg" id="office_img" title="Office" alt="Office" width="68" height="51"/></a>
    <br />
    Office
    </div>
    
    <div class="category">
    <a href="http://hk.yahoo.com">
    <img src="./images/storage_mouseout.jpg" id="storage_img" title="Storage" alt="Storage" width="68" height="51"/></a>
    <br />
    Storage
    </div>
    
    </div>
    </body>
    
    </html>
    however, it didn't seem to work:

    http://hk.geocities.com/saratara_me/testing.html

  12. #12
    Join Date
    Nov 2005
    Posts
    8
    Quote Originally Posted by LJK
    Hi -
    Try adding a DOCTYPE! fixing the <head> - or see if this works:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Page Layout Fix</title>
    <style type="text/css">
    body{
    width:100%; height:100%; margin:0; padding:0; font-size:100%;
    text-align:center; background:white none;}
    div.contain{
    width:775px; margin:0 auto; font-family:"verdana", "geneva", sans-serif;}
    div.geocities{
    width:138px; margin:0; background:silver url("geodown.gif") no-repeat 0% 0%;
    height:300px; float:left;}
    div.category{
    width:637px; margin:0 auto; background:#ececec none; height:500px; float:left;}
    .category h1{
    color:blue; margin:0 auto; text-align:right; width:95%;}
    .category h4{
    color:black; background:white none; width:95%; margin:0 auto 15px auto;
    text-align:left;}
    .category p{
    width:100px; height:75px; margin:0 auto 0 15px; float:left; font-size:80%;}
    .category p a img{
    border:none;}
    a:link, a:visited{
    color:black; text-decoration:none;}
    a:focus, a:hover{
    color:#ff0033;}
    .main{
    margin: 0px auto;}
    </style>
    </head>
    <body>
    <div class="contain">
    <div class="geocities">
    </div>
    	<div class="category">
    	<h1>Whatnot Site</h1>
    	<h4>Categories</h4>
    	<p>
    	<a href="http://hk.yahoo.com/">
    	<img src="bedroom_mouseout.jpg" alt="Bedroom" id="bedroom_img"
    	title="Bedroom" height="51" width="68">
    	<br />
    	Bedroom</a>
    	</p>
    	<p>
    	<a href="http://hk.yahoo.com/">
    	<img src="dining_room_mouseout.jpg" id="dining_room_img"
    	title="Dining Room" alt="Dining Room" height="51" width="68">
    	<br />
    	Dining Room</a>
    	</p>
    	<p>
    	<a href="http://hk.yahoo.com/">
    	<img src="entertainment_mouseout.jpg" id="entertainment_img"
    	title="Entertainment" alt="Entertainment" height="51" width="68">
    	<br />
    	Entertainment</a>
    	</p>
    	<p>
    	<a href="http://hk.yahoo.com/">
    	<img src="office_mouseout.jpg" id="office_img" title="Office"
    	alt="Office" height="51" width="68">
    	<br />
    	Office</a>
    	</p>
    	<p>
    	<a href="http://hk.yahoo.com/">
    	<img src="storage_mouseout.jpg" id="storage_img" title="Storage"
    	alt="Storage" height="51" width="68">
    	<br />
    	Storage</a>
    	</p>
    	</div>
    	<br style="clear:both;" />
    </div>
    </body>
    </html>
    Good luck,
    El
    Thank you very much for your reply.
    After updating the page using the codes you provided.
    The page now looks like this:
    http://hk.geocities.com/saratara_me/testing2.html

    This is great, thank you very much for your help and to all who helped me.
    Code:
    while(true){
    say("Thank you very much");
    }

  13. #13
    Join Date
    May 2004
    Location
    dobson ave.
    Posts
    694
    Hi -
    I'm glad that helped.
    But you should remove the div.geocities / <div class="geocities"> that I'd added, since that was just to represent the ads that are dropped into your site's page.
    [I worked on it w/out server access, so I'd thrown out all that original garbage...]

    Have fun,
    El
    F-fox 2.0 :: US :: el design site :: 768 kbps :: WIN

  14. #14
    Join Date
    Nov 2005
    Posts
    8

    Talking

    Quote Originally Posted by LJK
    Hi -
    I'm glad that helped.
    But you should remove the div.geocities / <div class="geocities"> that I'd added, since that was just to represent the ads that are dropped into your site's page.
    [I worked on it w/out server access, so I'd thrown out all that original garbage...]

    Have fun,
    El
    Thanks for reminding me.
    You all have been very helpful!
    Thank you very much to you all.

Thread Information

Users Browsing this Thread

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

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