Centering something that floats left

$title - Your site for great afro-carribean music!

I need that button row to be centered. However, for them to be the way they are, they require the float:left tag.

HTML:

li
{	margin: 0;
padding: 0;
list-style: none;
float: left;
font: 16px charcoal,impact;}

HTML:

    <li><a href="shop.php">Shop</a></li>
<li><a href="termine.php">Termine</a> </li>
<li><a href="contakt.php">Contakt</a> </li>
<li><a href="info.php">Bandinfo</a> </li>
<li><a href="kritik.php">Kritikien</a> </li>

How can I get that centered?

 

Have you tried the <div align="center"> </div> tags?

 

Yep. Didn't work. Tried centering it in the CSS, tried centering it with <center>, nothing seems to work. >.< Basically, I need either a way to give it float:none and still stay on one line, or a way to center it through float left.

 

You want to get rid of the float:left and instead have display:inline for all your <li> elements in that id.

 

Just saved that as such. It produces an ugly blob. Look again if you want to see it. It doesn't work. It may have something to do with the fact that the "display:block" tag is a necessity for "li a" and the sole contents of the lists are links.

 

You need to do it for all your <li> tags in that id. You didn't change it in this one:

Code:

#sddm li a
{    [COLOR=Red]display: block;[/COLOR]
margin: 0 1px 0 0;
padding: 4px 10px;
background: #a8503c;
color: #ebcfaa;
text-align: center;
text-decoration: none;}

 

That's for links. And I can't do that because that [****][****][****][****]s up the javascript drop-down menus.

 

.buttons {
float: left;
text-align:center;
width: 100%
}


Then try using display: inline-block on your LI tags. You should not be floating your list (LI) elements.