Vertical alignment in menu list

html

	<div id="menu">
		<ul>
			<li><a href="#">menu 1</a></li>
			<li><a href="#">menu 1</a></li>
			<li><a href="#">menu 1</a></li>
		</ul>
	</div>

Code (markup):

css

#menu {
	background-color:#039ce3;
	width:100%;
	padding:0;
	margin:0;
	height: 30px;
}

#menu ul {
	list-style:none;
	margin:0;
	padding:0 0 0 5px;
}

#menu li {
	float: left;
	margin:0;
	padding:0;
	width: 120px;
	border: 1px solid #BEF052;
}

#menu li a, #menu li a:visited{
	display: block;
	float: left;
	text-align: center;
	color:#000000;
	width: 120px;
	height:28px;
}

#menu li a:hover {
	background-color: #13b1fb;
}

Code (markup):

result


vertical-align:midle does not work

any idea to resolve this problem?

Thanks

 

Set the line-height equal to the container height.

cheers,

gary

 

Thanks a lot!!!

p.s. your links in sign does not work

 

You're quite welcome. Give the links another try; I have no problem with them.

cheers,

gary

 

Work good for me too.

Useful info on there too.

 

This solution does not work if the menu label is more than one line.

Any suggestion?

 

It would have been better to start a new topic/thread, with a reference to this thread. Maybe a mod will move it.

The solution in modern browsers and IE8 is trivial; the solution for IE<8 is non-intuitive, but doable. See centering inline elements vertically.

cheers,

gary