ansaurus

Question

how to vertically align <li> elements in <ul> ?

Answer 1

A:

I assume that since you're using an XML declaration, you're not worrying about IE or older browsers.

So you can use display:table-cell and display:table-row like so:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <style type="text/css">
        .toolbar ul {
            display:table-row;
        }
        .toolbar ul li
        {
            display: table-cell;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar ul li a {
            display:table-cell;
            vertical-align: middle;
            height:100px;
            border: solid 1px black;
        }
        .toolbar ul li.button a {
            height:50px;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>

LeguRi 2010-08-03 21:00:18

thank you, this partially works. that is, the contents of the back boxes are centered, but how do i center the boxes themselves?

akonsu 2010-08-03 21:37:49

The middle of the page?

LeguRi 2010-08-03 22:02:19

no, no, the middle of the list. in this particular example, the last box should be lower than the first three.

akonsu 2010-08-04 01:02:17

@akonsu - I changed it, though I didn't test it on anything other than FireFox. Let me know if it fits.

LeguRi 2010-08-04 13:24:10

Richard, thanks a lot for your help. i did not know about these display types. unfortunately they are not supported in IE7. i found a way to align the contents of each <li>: http://www.ampsoft.net/webdesign-l/vertical-aligned-nav-list.html but there seems to be no cross browser way to align <li> inside <ul>...

akonsu 2010-08-04 15:26:48

If you're targetting IE7, why do you have an `<?xml?>` declaration? All versions of IE do not really supoprt XHTML. I think you might need to read Sending XHTML as text/html Considered Harmful: http://hixie.ch/advocacy/xhtml

LeguRi 2010-08-04 15:55:52

Answer 2

A:

text-align: center;

or do you mean like this:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>
    <style type="text/css">
        .toolbar li
        {
            border: solid 1px black;
            display: block;
            width: 300px;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
            text-align: center;
        }
        .toolbar li.button
        {
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>

tomvon 2010-08-04 15:17:17

this centers horizontally inside vertical list. i am looking for a solution to center vertically inside a horizontal list :)

akonsu 2010-08-04 15:30:20

ansaurus

tags:

views:

answers:

how to vertically align <li> elements in <ul> ?

related questions