CSS vertically align LI's in middle

Question

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?

Robusto · Accepted Answer · 2010-03-04 16:39:57Z

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>

Sniffer · Accepted Answer · 2010-03-04 16:39:44Z

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.

Emily · Accepted Answer · 2010-03-04 16:41:16Z

2

Add line-height:21px to .MenuBar

answered Mar 4, 2010 at 16:41

Emily

10.1k4 gold badges34 silver badges39 bronze badges

Comments

Sarfraz · Accepted Answer · 2010-03-04 16:36:27Z

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.

Community · Accepted Answer · 2017-05-23 11:57:42Z

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

Collectives™ on Stack Overflow

CSS vertically align LI's in middle

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Related