Avatar of jeffiepoo
jeffiepoo
Flag for United States of America asked on

CSS: text-align: center; not working

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!
CSSWeb DevelopmentHTML

Avatar of undefined
Last Comment
jeffiepoo

8/22/2022 - Mon
WalrusSoup

Have you tried using margin: 0 auto; to resolve the position issue?
jeffiepoo

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

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
Your help has saved me hundreds of hours of internet surfing.
fblack61
user_n

Can you give a link to the site or the entire html code with images and css files?
Anuradha Goli

add
margin-left:500px;  
for menubar style.
Bardobrave

Maybe that position:relative at #Menubar ul doesn't fit with text centering?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
SOLUTION
Chris Stanyon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Dewmec

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
Jen0910

#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!
jeffiepoo

ASKER
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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
jeffiepoo

ASKER
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

ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
jeffiepoo

ASKER
Great answer and description. Thanks.