Forums

daredanger

I've an image of width 591px and below that image I've to write Home, About and Contact. I want Home, About and Contact to be centered below the image. I'm using the html and css codes as shown below but I'm not getting the desired result. I'm getting Home, About and Contact starting from left only. They are not getting centered. Please help.

My HTML Code:

<div id="slider"> 
 <div><img src="image.jpg"></div>
 <div id="button-wrap">
 <ul id="button">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
 </div>
</div>

My CSS Code:

#slider {
 width:591px;
}
#button-wrap {
 width: 591px ;
 margin: 0 auto ;
}
#button li {
 float: left;
 margin-left: 5px;
}

jamy_za

Try this:

#button-wrap {
text-align: center;
}

daredanger

@jamy_za ... tried ur suggestion but that didn't work

jamy_za

Ah ok I see. It's because the width of the button wrap is the size of the slider itself. If you set the width of #button-wrap you will notice it starting to center.

daredanger

I changed the width of #button-wrap to 150px and got Home, About and Contact centered. But can't we have a better way. Suppose that I have to add another word, say Services, to Home, About and Contact then I'll have to again change the width to may be 200px or so. I think there should be a better approach than this.

jamy_za

I've actually been dealing with Centering elements with a dynamic width a lot lately and I have come up with two solutions.

CSS Method
Change your original CSS to this:

#slider {
 width:591px;
}
#button-wrap {
 display: table;
 margin: 0 auto ;
}
#button li {
 display: table-cell;
 float: left;
 margin-left: 5px;
}

That should work. However, it won't work in IE6 and 7. It will be aligned left instead.

The other way would be a javascript method.
Change your original CSS to this:

#slider {
 width:591px;
}
#button-wrap {
 margin: 0 auto ;
}
#button li {
 float: left;
 margin-left: 5px;
}

And add this within your <head> section:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script&gt;
<script type='text/javascript'>
$(document).ready(function(){
	$('#button-wrap').width($('#button-wrap').width());
});
</script>

What that is basically doing is setting #button-wrap's width to whatever it is at that point in time. The margin: 0 auto should then center it.

daredanger

@jamy_za .... thanks a ton......your first solution worked.......the jQuery one is not working.....is it at working at your end?

noahgelman

I'm too prideful than to rely on tables.

Try this:


#slider {
    width:491px;
    position:relative;
}

#button-wrap {
    display:inline-block;
    position:absolute;
    left:50%;
    top:(image height);
}
#button {
    position:relative;
    left:-50%;
}

That sounds like something that should work. One or two things in the area might need to be adjusted. You have a solution though so you should probably stick with it.

daredanger

@noahgelman .... thanks.....ur solution is working perfectly in chrome and mozilla......in ie6 they are not coming exactly in the center, they are getting shifted more towards right side....u also said that you will not rely on tables....please tell the reason.....are there any issues?

treehouse : what would you like to learn today?

Forums

Centering items in a div