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

96

J'ai une horizontale <ul>et j'ai besoin de centrer chacun <li>d'eux verticalement. Mon balisage est ci-dessous. Chacun <li>a une bordure, et j'ai besoin que les éléments ainsi que leur contenu soient au milieu verticalement. Veuillez aider; Je suis nouveau sur 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
la source

w3schools.com/css/css_navbar.asp - je sais que cela a été répondu, mais au cas où quelqu'un regarderait à partir de maintenant, j'ai trouvé cela utile

JabbaWook

75

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

Ainsi, vous pouvez utiliser display:table-cellet display:table-rowaimer ainsi:

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

1

merci, cela fonctionne partiellement. autrement dit, le contenu des boîtes arrière est centré, mais comment centrer les boîtes elles-mêmes?

akonsu

non, non, au milieu de la liste. dans cet exemple particulier, la dernière case doit être inférieure aux trois premières.

akonsu

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

Richard JP Le Guen

1

Richard, merci beaucoup pour votre aide. je ne connaissais pas ces types d'affichage. malheureusement, ils ne sont pas pris en charge dans IE7. J'ai trouvé un moyen d'aligner le contenu de chaque <li>: ampsoft.net/webdesign-l/vertical-aligned-nav-list.html mais il ne semble pas y avoir de moyen entre navigateurs d'aligner <li> à l'intérieur de <ul>. ..

akonsu

1

Si vous ciblez IE7, pourquoi avez-vous une <?xml?>déclaration? Toutes les versions d'IE ne supportent pas vraiment XHTML. Je pense que vous devrez peut-être lire Envoyer du XHTML sous forme de texte / html considéré comme nocif: hixie.ch/advocacy/xhtml

Richard JP Le Guen

75

En voici une bonne:

Définir line-heightégal à tout ce qui heightest; fonctionne comme un charme!

Par exemple:

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

patauger
la source

1

Pouvez-vous élaborer avec un petit exemple?

Leigh

1

Parfait - hauteur de ligne: 30px; sur floated <li> était ce dont j'avais besoin (Chrome)

GuruBob

1

Que se passe-t-il s'il se compose de deux lignes?

Mahesh

1

Oui, viable uniquement avec pas plus d'une ligne de texte.

Wanny Miarelli

1

C'est la seule chose qui a fonctionné pour moi. Les autres réponses n'ont pas fonctionné.

adev

34

Vous pouvez utiliser flexbox pour cela.

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

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

dimmech
la source

4

J'ai eu le même problème. Essaye ça.

<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
la source

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

Réponses: