Center inline < li > elements

[arvana]

This is an issue that has flummoxed me so far, and I haven't been able to find anything on the web that addresses it.

I have a site with a horizontal menu made up of inline[*] elements, which wraps into multiple lines. I would like to have each line centered, but it seems as though when an[*] is set to inline it will only text-align left. I can get the entire div containing the menu items to center, but not the individual lines of menu items relative to each other.

I've tried everything I can think of, but no joy. Anybody faced this issue in the past who can shed some light on it for me?

I don't have the option of changing to a different element than[*] since the menu is generated by a content management system.

Many thanks!

[computergenius]

Not sure what you mean by 'inline', but wouldn't CSS solve your problem?

[dsmasters]

This some CSS that I use for a horizontal menu.

Maybe it will help -

#navigation{
background:url(images/nav.jpg) no-repeat bottom center;
height:44px;
line-height:44px;
}

#navigation ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navigation ul li {
display: inline;
}

#navigation ul li a
{
text-decoration: none;
padding: 15px 1em;
color: #fff;
text-transform:uppercase;
font-size:12px;
letter-spacing:1px;
}

#navigation ul li a:hover
{
color: #FFFF00;
background:url(images/nav_hover.jpg) bottom center;
}

The thing that makes it center is the ul set to center. I think that if you removed the height and line height references from "navigation" that it should wrap and horizontal center.

You can see it in action here - http://dan.idano.net

Dan

[arvana]

Thanks for the replies -- the issue is when the menu wraps onto a second line. The second (and subsequent) lines always seem to align to the left of their container, even if that container is centered.

Here's the page I'm having the issue with:
http://www.control-access8.com/~soulconnection/

If you scroll down to the bottom, you'll see that the links in the footer are centered as a whole, but the individual lines aren't centered relative to each other, and I can't get them to, no matter how many elements I make text-align:center.

[dsmasters]

Actually I could not let it go. This works and you can see a sample of it here -

http://temp.idano.net/

Here is the modified CSS -

#navigation{
background:url(images/nav.jpg);
}

#navigation ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navigation ul li {
display: inline;
line-height:44px;
}

#navigation ul li a
{
text-decoration: none;
padding: 15px 1em;
color: #fff;
/*text-transform:uppercase;*/
font-size:12px;
letter-spacing:1px;
font-weight:bold;
}

#navigation ul li a:hover
{
color: #fee202;
background:url(images/nav_hover.jpg) bottom center;
}

It wraps to the second line and is centered.

Dan

[bj]

Add this to the bottom of your stylesheet:

#footer ul.menu {
text-align: center;
}

tested in firefox and found to work. It's possible you might have to get even more specific in IE.

[arvana]

Ha! You're absolutely right, dsmasters & bj, that works! Thanks a million -- I tried centering everything *except* the <ul> element. CSS can be quite mystifying sometimes.....

*humbled*

[bj]

You're very welcome.

I've had quite a bit of practice . . . which means I have a permanent callus (sp?) on my forehead from banging my head against the desk.

[arvana]

I'll have to send you a nice pumice stone for that....

Thanks again!

[magic_majax]

Originally Posted by dsmasters

This some CSS that I use for a horizontal menu.

Maybe it will help - Dan

It might help me I think, thanks for that, saved me a bit of googling.

[Orion]

fyi... your font in IE is almost illegible as it's soooo tiny.. in firefox it's nice and large (almost too large lol)..

not sure if that intended however if not it might be something you'll want to look at.

Nice design!

[TrafficProducer]

CSS or Tables

(Your Page look quite as it is good now :)

Well here's basic tables:-

Idea is to place code in a middle cell of three.

Youc can then do an align="left" that cell.

<table border="1" width="100%">
  <tr>
    <td width="33%"></td>
    <td width="33%">
      <ul>[*]1[*]2[*]3[*]4[/list]    </td>
    <td width="34%"></td>
  </tr>
</table>