Jak wyrównać w pionie <li> elementy w <ul>?

97

Mam poziomy <ul>i muszę wyśrodkować <li>w nim każdy w pionie. Moje znaczniki są poniżej. Każdy <li>ma obramowanie, a elementy oraz ich zawartość muszą znajdować się na środku w pionie. Proszę pomóż; Jestem nowy w 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
źródło
w3schools.com/css/css_navbar.asp - wiem, że na to odpowiedziano, ale na wypadek, gdyby ktoś od tej pory spojrzał na to,
uznałem

Odpowiedzi:

76

Zakładam, że skoro używasz deklaracji XML, nie martwisz się o IE lub starsze przeglądarki.

Możesz więc używać display:table-celli display:table-rowtak:

<?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
źródło
1
dziękuję, to częściowo działa. to znaczy zawartość tylnych pudełek jest wyśrodkowana, ale jak wyśrodkować same pudełka?
akonsu
nie, nie, środek listy. w tym konkretnym przykładzie ostatnie pole powinno być niższe niż pierwsze trzy.
akonsu
@akonsu - zmieniłem to, chociaż nie testowałem tego na niczym innym niż FireFox. Daj mi znać, jeśli pasuje.
Richard JP Le Guen
1
Richard, bardzo dziękuję za pomoc. nie wiedziałem o tych typach wyświetlania. niestety nie są obsługiwane w IE7. Znalazłem sposób na wyrównanie zawartości każdego <li>: ampsoft.net/webdesign-l/vertical-aligned-nav-list.html, ale wydaje się, że nie ma sposobu na wyrównanie <li> wewnątrz <ul> między przeglądarkami. ..
akonsu
1
Jeśli celujesz w IE7, dlaczego masz <?xml?>deklarację? Wszystkie wersje IE nie obsługują standardu XHTML. Myślę, że możesz potrzebować przeczytać Wysyłanie XHTML jako tekst / html Uważane za szkodliwe: hixie.ch/advocacy/xhtml
Richard JP Le Guen
75

Oto dobry:

Ustaw line-heightrówne temu, co heightjest; działa jak marzenie!

Na przykład:

li {
    height: 30px;
    line-height: 30px;
}
przebrnąć
źródło
1
Czy możesz rozwinąć mały przykład?
Leigh,
1
Idealne - wysokość linii: 30px; na floated <li> było to, czego potrzebowałem (Chrome)
GuruBob,
1
Co się stanie, jeśli będzie się układać w dwie linie?
Mahesh
1
Tak, wykonalne tylko z nie więcej niż jednym wierszem tekstu.
Wanny Miarelli
1
To jedyna rzecz, która zadziałała dla mnie. Inne odpowiedzi nie działały.
adev
35

Możesz do tego użyć flexbox.

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

Szczegółowe wyjaśnienie sposobu korzystania z Flexbox można znaleźć tutaj .

dimmech
źródło
4

Miałem ten sam problem. Spróbuj tego.

<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
źródło