Need help on horizontally centering some <div>s

**iamsuperman** · 11-30-2005 08:26 AM

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.

**tgrk35** · 11-30-2005 09:49 AM

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

**iamsuperman** · 11-30-2005 05:05 PM

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!

**tgrk35** · 11-30-2005 05:22 PM

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.

**iamsuperman** · 12-01-2005 02:42 AM

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>

**tgrk35** · 12-01-2005 06:39 PM

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

.

**iamsuperman** · 12-02-2005 01:02 AM

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>

**tgrk35** · 12-04-2005 02:05 PM

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.

**ShrineDesigns** · 12-04-2005 02:13 PM

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>

**LJK** · 12-04-2005 07:22 PM

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

**iamsuperman** · 12-05-2005 01:14 AM

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

**iamsuperman** · 12-05-2005 01:28 AM

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");
}

**LJK** · 12-05-2005 03:38 PM

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

**iamsuperman** · 12-05-2005 04:06 PM

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: Need help on horizontally centering some <div>s

Thread Tools

Display

Need help on horizontally centering some <div>s

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions