centering menu text

escaflowne11 · #1 Sep 30th, 2006, 11:36

I used ukgeoff's tutorial to make the menu system, and found it to be extremely helpful for menu systems, but I want to know how to center the text inside of the li values. Let me show you the code I am working with here, if your not familiar with his tutorial...

Code: Select all

div#nav ul
{
position: absolute;
list-style: none;
list-image: none;
margin: 0;
padding: 0;
background-color: #ffbbbb;
width: 80px;
height: 20px;
font-size: 10px;
}

div#nav li
{
position: relative;
}

div#nav ul.level1
{
height: 20px;
width: auto;
}

div#nav ul.level1 li
{
float: left;
margin: auto;
}

div#nav li a {
display: block;
padding: 3px 0 3px 3px;
text-decoration: none;
}

div#nav ul.level1 a
{
width: 77px;
}

div#nav li a:hover 
{
color: #000000;
background-color: #005fa4;
}

and... the html!

Code: Select all

<body>
    <div id='main'>
    
        <div id='head'>
        </div>
        
            <div id='nav'>
                <ul class='level1'>
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                </ul>
            </div>
            
        <div id='subnav'>
        </div>
        
        <div id='content'>
        </div>
        
    </div>

</body>

I hope this isnt too confusing. Let me know if you dont understand what I am aiming for.

jhappeal · #2 Sep 30th, 2006, 13:15

I think this would work

Code: Select all

div#nav li { 
     position: relative;
     text-align: center;
  }

ukgeoff · #3 Sep 30th, 2006, 13:22

You could set the nominal width for your links in the <li> styling to whatever you want it to be and also add; text-align: center; to this style.

Sound rights. Try it and get back if the effect is not what you intended.

escaflowne11 · #4 Oct 1st, 2006, 01:17

It worked great, thanks much!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Centering dropdown menu	gribble	Web Page Design	4	Aug 30th, 2007 16:10
Menu pushes text down	Dapandyman	Web Page Design	3	Nov 23rd, 2006 17:02
enter text in form menu	Paula	Web Page Design	1	Aug 15th, 2006 17:31
Building Text/Dropdown Menu w/ no background	TruBluTex	Flash & Multimedia Forum	8	Jan 15th, 2006 20:54

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
centering menu text