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