troubleshooting Question

CSS: text-align: center; not working

Avatar of jeffiepoo
jeffiepooFlag for United States of America asked on
Web DevelopmentCSSHTML
13 Comments2 Solutions705 ViewsLast Modified:
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;
}

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

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!
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 2 Answers and 13 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 13 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros