Comment aligner verticalement les éléments <li> dans <ul> ?

Question

Comment aligner verticalement les éléments <li> dans <ul> ?

Demandé el 3 de Août, 2010: Quand la question a-t-elle été
110532 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai une horizontale <ul> et je dois centrer chaque <li> à la verticale. Mon balisage est ci-dessous. Chaque <li> a une bordure, et j'ai besoin que les éléments ainsi que leur contenu soient au milieu verticalement. Aidez-moi, je suis novice en matière de 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>

Demandé el 3 de Août, 2010 par akonsu

0 votes

w3schools.com/css/css_navbar.asp - Je sais qu'on a déjà répondu à cette question, mais au cas où quelqu'un la regarderait à partir de maintenant, j'ai trouvé ceci utile.

Commenté el 5 de Mai, 2016 par JabbaWook

Answer 1

4 Réponses

Answer 2

91voto

wade Points 293

En voici un bon :

Définir line-height égal à ce que le height est ; fonctionne comme un charme !

Par exemple

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

Répondu el 17 de Juin, 2012 par wade (293 Points )

1 votes

Pouvez-vous nous donner un petit exemple ?

Commenté el 17 de Juin, 2012 par Leigh

1 votes

Parfait - line-height : 30px ; sur les <li> flottants était ce dont j'avais besoin (Chrome)

Commenté el 22 de Janvier, 2013 par GuruBob

0 votes

Simple et efficace. Merci.

Commenté el 26 de Décembre, 2014 par Samuel Ramzan

Afficher 3 autres commentaires

Answer 3

77voto

Richard JP Le Guen Points 13306

Je suppose que, puisque vous utilisez une déclaration XML, vous ne vous souciez pas d'IE ou des navigateurs plus anciens.

Vous pouvez donc utiliser display:table-cell y display:table-row así:

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

Répondu el 3 de Août, 2010 par Richard JP Le Guen (13306 Points )

1 votes

Merci, cela fonctionne partiellement. c'est-à-dire que le contenu des boîtes arrière est centré, mais comment puis-je centrer les boîtes elles-mêmes ?

Commenté el 3 de Août, 2010 par akonsu

0 votes

Non, non, le milieu de la liste. dans cet exemple particulier, la dernière case devrait être plus basse que les trois premières.

Commenté el 4 de Août, 2010 par akonsu

0 votes

@akonsu - Je l'ai modifié, mais je ne l'ai pas testé sur autre chose que FireFox. Faites-moi savoir si cela convient.

Commenté el 4 de Août, 2010 par Richard JP Le Guen

Afficher 3 autres commentaires

Answer 4

55voto

user1074170 Points 38

Vous pouvez utiliser le système Flexbox pour cela.

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

Une explication détaillée de l'utilisation de flexbox peut être trouvée aquí .

Répondu el 8 de Août, 2016 par user1074170 (38 Points )

Answer 5

5voto

HesapAdam Points 1

J'ai eu le même problème. Essayez ceci.

<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;
}

Répondu el 11 de Juillet, 2013 par HesapAdam (1 Points )

Comment aligner verticalement les éléments <li> dans <ul> ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment aligner verticalement les éléments <li> dans <ul> ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: