Vertically centre a menu without setting an explicit width

Revision: 40497

at February 3, 2011 01:16 by 1man

Initial Code

<style type="text/css">
#nav {
	margin: 0 auto;
	text-align: center;
	}
#nav li {
	display: inline;
	vertical-align: middle;
	}
#nav li a {
	display: inline-block;
	}
</style>

<body>
	<ul id="nav">
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
		<li><a href="#"></a></li>
	</ul>
</body>

Initial URL

http://csswizardry.com/2011/01/create-a-vertically-centred-horizontal-navigation/

Initial Description

Useful bit of CSS to vertically centre a navigation. Good for Pagination.

Initial Title

Vertically centre a menu without setting an explicit width

Initial Tags

list

Initial Language

CSS

Choose a language for easy browsing: