CSS vertically align LI's in middle
I have the following HTML where I need the LI elements to vertically display in the middle of the 21 pixel high UL area. Here is my HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
.MenuBar
{
padding: 0px;
开发者_StackOverflow社区 border: 1px solid #036;
height: 21px;
font-size: 8pt;
}
.MenuBar li
{
display: inline;
padding-left: 20px;
}
</style>
</head>
<body>
<ul class="MenuBar">
<li>Link 1</li><li>Link 2</li><li>Link 3</li></ul>
</body>
</html>
How would one alter the above HTML to achieve this effect?
I presume you are trying to make a horizontal rather than a vertical list, since you are setting the LI elements display type to "inline". So try this:
<style type="text/css">
.MenuBar
{
padding: 0px;
border: 1px solid #036;
height: 21px;
font-size: 8pt;
}
.MenuBar li
{
display: inline;
line-height: 21px;
padding-left: 20px;
}
</style>
Is this what you're after?
.MenuBar li
{
display: inline;
padding-left: 20px;
line-height: 21px;
}
Like Sarfraz, I'm not sure I totally understand the question.
Add line-height:21px to .MenuBar
Could not get exactly what you want but if you want to make the lists appear vertically, try this:
.MenuBar li
{
display: block;
padding-left: 20px;
}
Just change display property to block instead of inline. And this is the default behavior too.
The most elegant and reliable way of doing it is to insert an assistent inline element into the <li /> element as the 1st child, which height should be set to 100% (of its parent’s height, the <li />), and its vertical-align set to middle. To achieve this, you can put a <span />, but the most convenient way is to use li:after pseudo class.
.MenuBar li:before
{
display: inline;
height: 100%;
vertical-align: middle;
content: '';
}
In this way you don't need to hard code a height value (21px or something). Refer to: CSS vertical alignment text inside li
加载中,请稍侯......
精彩评论