Vertical align multiple lines of li

Question

This is what I'm trying to accomplish. I have a unordened list as a horizontal menu. The <li> should be vertical aligned in the middle, like this:

 _______________________________________
|                                       |
|                                       |
|   [____]   [____]   [____]   [____]   |
|                                       |
|_______________________________________|

No problem so far, using vertical-align: middle and a line-height. The challenge is that I want to be able to have two lines, and have them aligned in the middle aswell, like this:

 _______________________________________
|                                       |
|   [____]   [____]   [____]   [____]   |
|                                       |
|       [____]    [____]    [____]      |
|_______________________________________|

The code so far: HTML

<ul>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
</ul>

CSS

ul {
    margin: 0;
    padding: 0;
    width: 500px;
    height: 100px;
    background: lightblue;
    text-align: center;
    list-style: none;
    vertical-align: middle;
    line-height: 100px;
}
    ul li {
        display: inline;
    }
        ul li a {
            padding: 5px 15px;
            margin: 0 10px;
            background: lightgreen;
        }

I already found this and this, but that doesn't help me either.

I created a single line JSFiddle and a multi line JSFiddle.

Being rather old-fashioned, I think I would just use a table... — Floris, Aug 06 '13 at 18:12
The number of items is dynamic, so that won't work unfortunately. — LinkinTED, Aug 06 '13 at 18:25

score 0 · Answer 1 · answered Aug 06 '13 at 18:13

0

I think all you needed to do was set the height of the UL to auto.

ul {
    margin: 0;
    padding: 0;
    width: 500px;
    height: auto;
    background: lightblue;
    text-align: center;
    list-style: none;
    vertical-align: middle;
    line-height: 100px;
}

Take a look at the JS Fiddle and see if that does what you were looking to do.

answered Aug 06 '13 at 18:13

Brian Hoover

7,585
2
23
39

The `ul` has a fixed height (100px)... otherwise it would work. – LinkinTED Aug 06 '13 at 18:25
Do you know that you have two lines inside the UL? If that's the case, you could set the line-height to 50px. – Brian Hoover Aug 06 '13 at 18:30
I want to be able to have 1 line *or* 2 lines, sorry if my startpost wasn't clear. – LinkinTED Aug 06 '13 at 18:33
You might want to take a look at http://stackoverflow.com/questions/1708054/center-ul-li-into-div – Brian Hoover Aug 06 '13 at 19:00

score 0 · Answer 2 · answered Aug 06 '13 at 19:00

0

Add display:table-cell; to the ul style. Then adjust the line height as needed for proper spacing of the double line.

answered Aug 06 '13 at 19:00

andi

6,270
1
15
43

score 0 · Accepted Answer · answered Aug 06 '13 at 19:03

If you can use a wrapper element, say a <nav> element, and ypu can do without IE7 and earlier support, maybe this will work for you: http://jsfiddle.net/LZfVY/1/

nav {
    margin: 0;
    padding: 0;
    width: 500px;
    height: 100px;
    background: lightblue;
    line-height: 100px;
    font-size:0;
    text-align: center;
}

ul {
    display:inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    background: lightblue;
    list-style: none;
    line-height: 2.2;
    font-size:16px;
}
ul li {
    display: inline;
}

ul li a {
    padding: 5px 15px;
    margin: 0 10px;
    background: lightgreen;
}

Vertical align multiple lines of li

3 Answers3