Wie kann ich <li> Elemente in <ul> vertikal ausrichten?

95

Ich habe eine horizontale <ul>und ich muss jede <li>vertikal darin zentrieren. Mein Markup ist unten. Jeder <li>hat einen Rand, und ich brauche die Gegenstände sowie deren Inhalt, um vertikal in der Mitte zu sein. Bitte helfen Sie; Ich bin neu 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
quelle

w3schools.com/css/css_navbar.asp - Ich weiß, dass dies beantwortet wurde, aber falls jemand dies von nun an

ansieht,

74

Ich gehe davon aus, dass Sie sich keine Sorgen um den Internet Explorer oder ältere Browser machen, da Sie eine XML-Deklaration verwenden.

So können Sie verwenden display:table-cellund display:table-rowmögen:

<?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
quelle

1

Danke, das funktioniert teilweise. Das heißt, der Inhalt der hinteren Boxen ist zentriert, aber wie zentriere ich die Boxen selbst?

Akonsu

Nein, nein, die Mitte der Liste. In diesem Beispiel sollte das letzte Feld niedriger sein als die ersten drei.

Akonsu

@akonsu - Ich habe es geändert, obwohl ich es nur mit FireFox getestet habe. Lassen Sie mich wissen, ob es passt.

Richard JP Le Guen

1

Richard, vielen Dank für deine Hilfe. Ich wusste nichts über diese Anzeigetypen. Leider werden sie in IE7 nicht unterstützt. Ich habe einen Weg gefunden, den Inhalt jedes <li> auszurichten: ampsoft.net/webdesign-l/vertical-aligned-nav-list.html, aber es scheint keinen browserübergreifenden Weg zu geben, um <li> innerhalb von <ul> auszurichten. ..

Akonsu

1

Wenn Sie auf IE7 abzielen, warum haben Sie eine <?xml?>Erklärung? Alle Versionen von IE unterstützen XHTML nicht wirklich. Ich denke, Sie müssen möglicherweise das Senden von XHTML als Text / HTML lesen. Als schädlich eingestuft: hixie.ch/advocacy/xhtml

Richard JP Le Guen

74

Hier ist eine gute:

Setze line-heightgleich was auch immer das heightist; klappt wunderbar!

Z.B:

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

waten
quelle

1

Können Sie mit einem kleinen Beispiel näher darauf eingehen?

Leigh

1

Perfekt - Zeilenhöhe: 30px; on floated <li> war das, was ich brauchte (Chrome)

GuruBob

1

Was passiert, wenn es in zwei Zeilen unterteilt ist?

Mahesh

1

Ja, nur mit nicht mehr als einer Textzeile möglich.

Wanny Miarelli

1

Dies ist das einzige, was für mich funktioniert hat. Andere Antworten haben nicht funktioniert.

Adev

34

Sie können hierfür die Flexbox verwenden.

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

Eine ausführliche Erklärung zur Verwendung der Flexbox finden Sie hier .

dimmech
quelle

3

Ich hatte das gleiche Problem. Versuche dies.

<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
quelle

Wie kann ich <li> Elemente in <ul> vertikal ausrichten?

Antworten: