Auto center navigation links and other elements using CSS

If you already have experience in building navigation for websites, probably you already know that using floats for links gives you more flexibility for customization.

However, the down-side is that when the design requires, we cannot center the navigation automatically as you add more links. Of course, we can specify margin: auto for the ul element, but than, we need to assign the width, which is very inconvenient when, for example, we need to add an extra link and we need to adjust the ul width again.

In next posting, you will see that the solution is easy and you will find other situations where you can apply the same technique.

View Demo

Display: inline is the solution

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

<div id="nav">
       <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">Investments</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
       </ul>
</div>

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' => '<span class="invisible">',
'after_title' => '</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") ) : ?>
            &nbsp;
      <?php endif; ?>
</div>

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.