Come allineare verticalmente gli elementi <li> in <ul>?

96

Ho un orizzontale <ul>e devo centrarlo <li>verticalmente. Il mio markup è di seguito. Ognuno <li>ha un bordo e ho bisogno che gli elementi e il loro contenuto siano al centro in verticale. Per favore aiuto; Sono nuovo in CSS.


<?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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar li
        {
            border: solid 1px black;
            display: block;
            float: left;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .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>

css

— akonsu
fonte

w3schools.com/css/css_navbar.asp - So che è stata data una risposta, ma nel caso qualcuno lo

— guardasse d'

75

Presumo che poiché stai usando una dichiarazione XML, non ti preoccupi di IE o dei browser meno recenti.

Quindi puoi usare display:table-celle in questo display:table-rowmodo:

<?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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

— Richard JP Le Guen
fonte

1

grazie, funziona parzialmente. ovvero, il contenuto delle scatole posteriori è centrato, ma come centrare le scatole stesse?

— Akonsu

no, no, al centro della lista. in questo particolare esempio, l'ultima casella dovrebbe essere inferiore alle prime tre.

— akonsu

@akonsu - L'ho cambiato, anche se non l'ho testato su nient'altro che FireFox. Fammi sapere se va bene.

— Richard JP Le Guen

1

Richard, grazie mille per il tuo aiuto. non conoscevo questi tipi di display. sfortunatamente non sono supportati in IE7. ho trovato un modo per allineare i contenuti di ogni <li>: ampsoft.net/webdesign-l/vertical-aligned-nav-list.html ma sembra che non ci sia un modo cross browser per allineare <li> all'interno di <ul>. ..

— akonsu

1

Se stai prendendo di mira IE7, perché hai una <?xml?>dichiarazione? Tutte le versioni di IE non supportano realmente XHTML. Penso che potresti aver bisogno di leggere Invio di XHTML come testo / html considerato dannoso

— Richard JP Le Guen

75

Eccone uno buono:

Impostato line-heightuguale a qualunque heightsia; funziona come un fascino!

Per esempio:

li {
    height: 30px;
    line-height: 30px;
}

— guadare
fonte

1

Puoi elaborare con un piccolo esempio?

— Leigh

1

Perfetto - altezza linea: 30 px; su floated <li> era ciò di cui avevo bisogno (Chrome)

— GuruBob

1

Cosa succede se si articola su due righe?

— Mahesh

1

Sì, utilizzabile solo con non più di una riga di testo.

— Wanny Miarelli

1

Questa è l'unica cosa che ha funzionato per me. Altre risposte non hanno funzionato.

— adev

34

Puoi usare flexbox per questo.

ul {
    display: flex;
    align-items: center;
}

Una spiegazione dettagliata di come utilizzare flexbox può essere trovata qui .

— dimmech
fonte

4

Ho avuto lo stesso problema. Prova questo.

<nav>
    <ul>
        <li><a href="#">AnaSayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</nav>

@charset "utf-8";

nav {
    background-color: #9900CC;
    height: 80px;
    width: 400px;
}

ul {
    list-style: none;
    float: right;
    margin: 0;
}

li {
    float: left;
    width: 100px;
    line-height: 80px;
    vertical-align: middle;
    text-align: center;
    margin: 0;
}

nav li a {
    width: 100px;
    text-decoration: none;
    color: #FFFFFF;
}

— HesapAdam
fonte