CSS vertically align LI's in middle
css, html, html-lists
Solution
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>
Problem
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; 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?