Auto center navigation links and other elements using CSS

Display: inline is the solution

#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).

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.

Footer

Latest Blog

WordPress themes that come with page builders are extremely popular because they are easy to use and clients love it because they don't depend on the developer to add content or make layout changes easily. Read More..