<ul>の<li>要素を垂直方向に整列させる方法は？

96

私は横型で、縦型の<ul>中央に配置する必要があり<li>ます。私のマークアップは以下です。それぞれ<li>に境界線があり、アイテムとその内容を垂直方向の中央に配置する必要があります。助けてください; 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

— アコンス
ソース

w3schools.com/css/css_navbar.asp -私はこの役に立った上で、これは今からこれを答えたが、ケースの誰のルックスにされています知っている

— JabbaWook

75

XML宣言を使用しているので、IEや古いブラウザについて心配する必要はないと思います。

したがってdisplay:table-cell、次のdisplay:table-rowように使用できます。

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

— リチャードJPルグエン
ソース

1

ありがとう、これは部分的に機能しますつまり、バックボックスの内容は中央に配置されますが、ボックス自体を中央に配置するにはどうすればよいですか？

— akonsu 2010

いいえ、いいえ、リストの真ん中。この特定の例では、最後のボックスは最初の3つよりも低くなければなりません。

— akonsu

@akonsu-変更しましたが、FireFox以外ではテストしていません。合うかどうか教えてください。

— Richard JP Le Guen 2010

1

リチャード、助けてくれてありがとう。これらの表示タイプについては知りませんでした。残念ながらIE7ではサポートされていません。各<li>の内容を揃える方法を見つけました：ampsoft.net/webdesign-l/vertical-aligned-nav-list.htmlしかし、<ul>内で<li>を揃えるクロスブラウザーの方法がないようです。 ..

— akonsu

1

IE7をターゲットにしている場合、なぜ<?xml?>宣言があるのですか？IEのすべてのバージョンは、実際にはXHTMLをサポートしていません。私はあなたが有害と考えられたテキスト/ htmlとしてXHTMLを送信読み取る必要があるかもしれないと思う：hixie.ch/advocacy/xhtml

— リチャードJPルGuen

74

ここに良いものがあります：

line-height何にでも等しく設定しますheightます。魅力のように動作します！

例えば：

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

— ウェイド
ソース

1

小さな例で詳しく説明できますか？

— リー

1

完璧-行の高さ：30px; 浮かんでいる<li>が必要だった（Chrome）

— GuruBob 2013年

1

それが2行になるとどうなりますか？

— Mahesh、2015

1

はい、1行以下のテキストでのみ実行可能です。

— Wanny Miarelli 2016年

1

これは私のために働いた唯一のものです。他の答えはうまくいきませんでした。

— adev 2017

34

これにはflexboxを使用できます。

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

flexboxの使用方法の詳細については、こちらをご覧ください。

— Dimmech
ソース

4

私も同じ問題を抱えていました。これを試して。

<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
ソース