Jump to content

CSS Vertical Aligment


cecilia
 Share

Recommended Posts

Hi everyone,I'm have a problem centering vertically the text inside each list item, using CSS and avoiding any tables.This is the HTML:

<div class="mainMenu"><ul><li ><a href="#">Item 1</a></li><li ><a href="#">Item 2</a></li><li ><a href="#">Item 3</a></li><li ><a href="#">Item 4</a></li><li ><a href="#">Item 5</a></li></ul></div>

And this is the CSS:

.mainMenu{	font: 8pt Helvetica;	width: 150px;	}.mainMenu ul {	padding: 0;	margin: 0;	list-style:none;}.mainMenu ul li a {	color:#000000;	text-decoration:none;	background: #FFFFFF;	display: block;	margin: 2px;	padding: 0 0 0 3px;	border: 1px solid #000000;	height: 20px;	text-align: center;}.mainMenu ul li a:hover {	background: #cccccc;	border: 1px solid #cccccc;}

Any help?Muchas gracias!

Link to comment
Share on other sites

Try using line-height:

.mainMenu ul li a {	color:#000000;	text-decoration:none;	background: #FFFFFF;	display: block;	margin: 2px;	padding: 0 0 0 3px;	border: 1px solid #000000;	height: 20px;		line-height: 20px;	text-align: center;}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...