Center Those Left Floated Links (CSS)

by justin carlson on 11/07/2008
So you've created some fancy web 2.0 looking buttons with a nice hover effect and maybe even a click effect, they sit float:left in your content.  You've even matched them up with your button element styles so everything looks pixel perfect. They look great don't they? Later in your site design you encounter a couple places where you'd like to center those buttons. Uh oh. There is no float:center. You can't center a dynamic width div using auto margins. So what do you do?

Cut straight to an example, or read more for the full info.

Try Google if you want, there doesn't seem to be a silver bullet for this.

If you want you can try doing this: http://www.cssplay.co.uk/menus/centered.html

That solution looks like this:

#menu2 {
display:table;
padding:0;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
}
#menu2 li {
display:table-cell;
}
* html #menu2 li {
float:left;
}
#menu2 a {
width:auto;
display:block;
padding:4px 16px;
color:#fff;
background:#08c;
border:1px solid #fff;
text-decoration:none;
}
* html #menu2 a {
float:left;
}
#menu2 a:hover {
color:#000;
background:#d4d4d4;
}

.container {clear:both; text-decoration:none;}
* html .container {display:inline-block;}
xhtml
<del class="container">
<ul id="menu2">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
</del>


So what have we got here? A list of links with list-style-type:none, display:table; margin:0 auto; and display:table-cell; for list items.

This uses CSS to make a list behave as a table. It works.

Another solution?

In the example above, the author took a list of links, and forced them to behave like a table, with cells. This makes sense because tables and their cells automatically adjust their width, yet the table itself can be centered using automatic margins (margin:0 auto;).

The other simple solution would be: USE A TABLE.

<div>
<table class="centeredlinks">
<tr>
<td><a class="button" href="#whatever"><span>Links</span></a></td>
<td><a class="button" href="#whatever"><span>Links</span></a></td>
<td><a class="button" href="#whatever"><span>Links</span></a></td>
<td><a class="button" href="#whatever"><span>Links</span></a></td>
<td><a class="button" href="#whatever"><span>Links</span></a></td>
</tr>
</table>
</div>

Apply your favorite sliding door web 2.0 button CSS, and the centering CSS, and your style sheet may look something like this:


.centeredlinks {
margin:0px auto;
border:0px;
}

a.button {
   
    text-decoration: none;
    display:block;
    float: left;
    margin:0px;
    padding-right: 6px;
    background:#ffffff url('../images/paging/buttons.gif') no-repeat 100% 0;
    line-height: 23px;
    text-decoration: none;
    cursor: pointer;
}

a.button span {
    display: block;
    color:#000000;
    background: transparent url('../images/paging/buttons.gif') no-repeat
        0 0;
    padding: 0px 2px 1px 8px;
}

a.button:hover {
    background-position: 100% -24px;
}

a.button:hover span {
    background-position: 0 -24px;
    color:#0;
}


You can view the example here.

Trackback

Trackback URL for this entry: http://www.tehuber.com/trackback.php?id=2008120814114219

No trackback comments for this entry.
Center Those Left Floated Links (CSS) | 0 comments | Create New Account
The following comments are owned by whomever posted them. This site is not responsible for what they say.