How cand I center (vertically) a listed element with its own height [Archive]

View Full Version : How cand I center (vertically) a listed element with its own height

Wisdom

10-28-2010, 11:46 AM

Hope I spelled the title correctly :(

So I have this menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Meniu vertical (simplu)</title>

<style>

ul.meniu{
list-style: none;
padding: 0px;
margin: 0px;
font-family: Verdana;
font-size: 12px;
width: 90px;}

ul.meniu li a{
text-decoration: none;
display: block;
height: 20px;
color: #3b73b3;
background: #CEDAE9;
valign: center;}

ul.meniu li a:hover{
color: #FFFFFF;
background: #2876c9;}

ul.meniu li a:active{
color: #FFFFFF;
background: #1F5C9C;}

</style>

</head>

<body>

<ul class="meniu">
<li><a href="#">Acasa</a></li>
<li><a href="#">Despre</a></li>
<li><a href="#">Suport</a></li>
<li><a href="#">Contact</a></li>
</ul>

</body>
</html>

And I gave the links a height, but I want them to be centered vertically (NOT text-align: center), without padding or margin.

Thanks!

jscheuer1

11-07-2010, 03:04 AM

The valign attribute is not a style property. It translates to vertical-align. However, it's pretty much a direct translation. The valign attribute is only valid for inline elements and td elements. Its meaning varies between the td and inline elements and isn't very cross browser where inline elements are concerned. Valid values are top, middle, and bottom. This is enforced for the vertical-align property. Browsers give leeway on the valign attribute, accepting center for middle.

But the a tags aren't either of these types of elements (not td and not inline), they've been made display block. So they are block level elements in the layout.

So the best choice here is padding. Why is it off limits?

Anyways, using padding:

<style type="text/css">

ul.meniu{
list-style: none;
padding: 0px;
margin: 0px;
font-family: Verdana;
font-size: 12px;
width: 90px;}

ul.meniu li a{
text-decoration: none;
display: block;
height: 1em;
padding: 0.2em 0 0.5em;
color: #3b73b3;
background: #CEDAE9;
}

ul.meniu li a:hover{
color: #FFFFFF;
background: #2876c9;}

ul.meniu li a:active{
color: #FFFFFF;
background: #1F5C9C;}

</style>

Notes: I've removed the meaningless valign and used em units for the padding and height which should then scale to other font sizes (em is a unit of font size) for the text. So changing the font size should in most cases also automatically change the height and padding proportionately.

Wisdom

11-22-2010, 04:18 PM

thank you John :)