CSS: text-align: center; not working

jeffiepoo
jeffiepoo used Ask the Experts™
on
Hey Experts, I have a menu that won't center items. It is driving me a bit crazy

The footer works fine.. Here it is:
#Footer
{
    background: url(images/MenubarBG.jpg) repeat-x;
    height: 59px;
    color: White;
    clear: left;
    text-align: center;
    z-index: 1;
}

Open in new window


However, the menubar doesn't work (description after code)
#Menubar
{
    background: url(images/MenubarBG.jpg) repeat-x;
    height: 59px;
    clear:right;
    z-index: 2;
}
#Menubar ul
{
    list-style-type: none;
    display:block;
    width: 100%;
    text-align: center;
    position: relative;
    top: 5px;
}
#Menubar ul li
{
    display: inline;
    float: left;
}

Open in new window


So, if i make the '#Menubar ul li' selector say float: right, then both elements are all the way to the right of the screen. As it is, it says float left, and they are horizontal and to the left of the screen.

If I delete the float: xxxx   altogether the elements are no longer stacked horizontally, but vertically and are still to the left of the screen.

The issue is that I want to have all of the elements centered. It doesn't seem that the text-align: center is working.

The elements are @ActionLinks within <li> tags in ASP.NET MVC3 razor page.

Please Help!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Have you tried using margin: 0 auto; to resolve the position issue?

Author

Commented:
replacing text-align: center with margin: 0 auto doesn't change anything.

Commented:
How about this?
Adding (margin:0 auto; width:868px;) sets the ul center. Once you figure out your menu li width and quantity of menu li items, you can determine the width you need and adjust the ul width:868px accordingly. I added some borders to help show what I did.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
#Menubar {
    background:#C90 url(images/MenubarBG.jpg) repeat-x;
    height: 59px;
    z-index: 2;
	padding-top:7px;
}
#Menubar ul {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	border:#666 dashed 1px;
	margin:0 auto;
	padding:4px;
	width:868px;
    display:block;
    list-style-type: none;
	top: 5px;
}
#Menubar ul li {
    float: left;
	margin-right:2px;	
	display: inline;
	border:#000 solid 1px;
	width:120px;
	text-align:center;
}   
#Menubar ul li:hover {
	color:#FFFFFF;
	background-color:#000000;
}  
.clearfix {
	clear:both;
}
</style>

</head>

<body>
<div id="Menubar">

<ul>
<li>Menu One</li>
<li>Menu Two</li>
<li>Menu Three</li>
<li>Menu Four</li>
<li>Menu Five</li>
<li>Menu Six</li>
<li>Menu Seven</li>
<div class="clearfix"></div>
</ul>

<!-- /Menubar --></div>
</body>
</html>

Open in new window

Screen-Shot-2012-05-23-at-3.01.1.png
MenubarBG.jpg
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
Can you give a link to the site or the entire html code with images and css files?
Anuradha GoliSystems Development / Support Specialist

Commented:
add
margin-left:500px;  
for menubar style.
Maybe that position:relative at #Menubar ul doesn't fit with text centering?
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Change the rule for #Menubar ul li to the following:

#Menubar ul li { display: inline-block; }

Open in new window

Commented:
Hi jeffiepoo,

Try setting your width of pixels instead of width: 100%. I'm quessing your text-align will work properly after that. Of course you may have to figure out how large you need your menu, but I doubt you want your menu to span the entire page.

If so, then your menu is still centered the way you have the code right now. You have the <ul> at width:100%, text-align: center, so the entire list should be all the way across the div or section and centered, which it probably is. However, if you want the individual list items, the <li> , to be centered, then include that in your #Menubar ul li  as text-align: centered with margin: 0 auto. So it should be as follows:
#Menubar ul li
{
	text-align: center;
    display: inline;
    float: left;
    margin: 0 auto;
}

Open in new window


If this does not fix your issue, please post the entire .css and .html so I can better reference what the problem is and we will get it working correctly for you. Thanks.

Dewmec

Dewmec

Commented:
#Menubar {
    background: url(images/MenubarBG.jpg) 0 0 repeat-x;
    height: 59px;
    z-index: 2;
    width:100%;
    text-align: center;
    position: relative;
}
#Menubar ul {
    list-style-type: none;
    display:inline;
    margin:5px auto 0 auto;
    width: XXXpx;/* set to your content width in %, em or px */
    position: relative;
    text-align: left;
}
#Menubar ul li {display: inline;}

and place <div style="clear:both;" before your div Menubar in your HTML to clear above it. I've seen the clear setting screw things up before when added to existing elements. It's odd, but it happens. Paul Irish recommends this method (a variation), and I hear he's pretty hoss ;-p

Hope that helps!

Author

Commented:
Jen0910, Thanks for the suggestion. I put a clear div before the Menubar div. Unfortunately this didn't work. I tried the rest of your css suggestion verbatim including some variations with no luck.

Dewmec: This didn't work:
#Menubar
{
    background: url(images/MenubarBG.jpg) repeat-x;
    height: 59px;
    width: 100%;
    text-align: center !important;
    position: relative;
    z-index: 2;
}
#Menubar ul
{
    list-style-type: none;
    display:inline;
    margin: 5px auto 0 auto;
    width: 900px;
    position: relative;
    text-align: left;
}
#Menubar ul li
{
    display: inline;
    float:left;
    margin: 0 auto;
}

Open in new window


Everyone else: setting absolute widths with auto margins doesn't work any way. No matter if I have position: relative or not it still doesn't work.

Author

Commented:
ChrisStanyon gets the prize! Congratulations! Why does this work and nothing else does? Does anyone have a good reasonable explanation?

For those too lazy to read above, the display:inline-block in the Menubar ul li fixed it.

#Menubar
{
    background: url(images/MenubarBG.jpg) repeat-x;
    height: 59px;
    width: 100%;
    text-align: center !important;
    position: relative;
    z-index: 2;
}
#Menubar ul
{
    list-style-type: none;
    display:inline;
    margin: 7px auto 0 auto;
    width: 100%;
    position: relative;
}
#Menubar ul li
{
    display: inline-block;
}

Open in new window

Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
If you float LIs within the UL, then they are effectively taken out of the document flow, so the text-align setting on the UL has no effect - there's no longer anything in the UL to centre!

Setting margins to auto is fine for centring block elements within another element as long as they have a defined width, but as soon as you float them so they line up horizontally you are back to the same problem as before - they are no longer part of the UL, so the text-align setting on the UL has no effect.

Setting them to inline-block allows the text-centre from the UL to work, because they still belong to the UL. They also now act like block level elements, meaning you can set widths if you want to.

Not really sure why people were suggesting clearing floats! That makes no sense.

Pleased you got it working :)

Author

Commented:
Great answer and description. Thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial