Auto center navigation links and other elements using CSS

Display: inline is the solution

As example, we will choose a simple mark-up:

The only thing left to do is to apply the CSS style:

#nav {width:960px; text-align: center} /*we specify a width for the parent element and we center the text for all of the child elements*/
#nav li, #nav a {display: inline} /*this property will allow the text links to be centered at all times*/
         #nav a {padding: 0 8px 9px; margin: 0 6px;} /*default styling for improved readability*/

Now we will have our navigation links centered at all times, which comes really handy when using the WordPress 3.0 built in navigation editor and you or your clients can add links without worries.

Center images when using WordPress widgets

Using the same principle, you can further enable other editable areas where you can upload images and have them stay centered.

1. Install image widget

First you will need to install Image Widget plug-in (at this moment it is still conflicting with the other popular plugi-in Custom Field Template. Make sure to disable the other one when working with Image Widget).

2. Define the widget:

The second step is to register the widget in functions.php:

//register footer logos widget
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'LOGOS FOOTER',
'before_widget' => '',
'after_widget' => '',
'before_title' =&gt; '<span class="invisible">',
'after_title' =&gt; '</span>',
));

As you can see we have set a class called invisible for the title, as in most of cases we need only the images not the titles, which we will hide using CSS.

Now, don’t forget to call the widget in the template file, for example in footer.php:

<div id="footer"><!--?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("LOGOS FOOTER") ) : ?-->   <!--?php endif; ?-->

3. The CSS

#footer {width:960px; text-align: center} /*we specify a default width for our parent element and align the text within*/
span.invisible {position: absolute; text-indent: -9999px} /*hides the title for the images in a SEO friendly way*/

By default, we have not included the image links in a list so the text-align: center is enough. Even if we would have, we could specify display: inline for the list elements and our images would still stay centered.

Conclusion

While the technique is relatively simple and easy to implement, it allows creating a better experience when using a content management system, such as WordPress and gives the possibility for non technical users to add new elements to the site while keeping everything centered.

4 Responses to “Auto center navigation links and other elements using CSS”

  1. Hi, this is nice trick, but i have problem:
    dropdown menu, because of
    #menu ul li{display:inline}
    #menu ul ul go left and not just under his direct parent….

    when i type #menu ul li{flot:left} everything is ok but links does not automatically go to the center…

    can you help me?

  2. try: position: relative
    on the parent li.

  3. does not work… pls if you know a solution help

    see here
    http://jsfiddle.net/Marvil/XVDb8/4/

  4. I found the solution:)

    display:inline-block;
    on the parent li