Bagaimana cara meratakan elemen <li> secara vertikal di <ul>?

97

Saya memiliki horizontal <ul>dan saya harus memusatkan masing-masing <li>di dalamnya secara vertikal. Markup saya ada di bawah. Masing-masing <li>memiliki batas, dan saya perlu item serta isinya berada di tengah secara vertikal. Tolong bantu; Saya baru mengenal 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
sumber
w3schools.com/css/css_navbar.asp - saya tahu ini telah dijawab tetapi jika ada yang melihat ini mulai sekarang saya merasa ini berguna
JabbaWook

Jawaban:

75

Saya berasumsi bahwa karena Anda menggunakan deklarasi XML, Anda tidak mengkhawatirkan IE atau browser lama.

Jadi, Anda dapat menggunakan display:table-celldan display:table-rowmenyukainya:

<?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
sumber
1
terima kasih, ini berfungsi sebagian. Artinya, isi kotak belakang berada di tengah, tetapi bagaimana cara saya menengahkan kotak itu sendiri?
akonsu
tidak, tidak, bagian tengah dari daftar. dalam contoh khusus ini, kotak terakhir harus lebih rendah dari tiga kotak pertama.
akonsu
@akonsu - Saya mengubahnya, meskipun saya tidak mengujinya pada apa pun selain FireFox. Beri tahu saya jika cocok.
Richard JP Le Guen
1
Richard, terima kasih banyak atas bantuannya. saya tidak tahu tentang jenis tampilan ini. sayangnya mereka tidak didukung di IE7. saya menemukan cara untuk menyelaraskan konten setiap <li>: ampsoft.net/webdesign-l/vertical-aligned-nav-list.html tetapi tampaknya tidak ada cara lintas browser untuk menyelaraskan <li> di dalam <ul>. ..
akonsu
1
Jika Anda menargetkan IE7, mengapa Anda memiliki <?xml?>deklarasi? Semua versi IE tidak benar-benar mendukung XHTML. Saya pikir Anda mungkin perlu membaca Mengirim XHTML sebagai teks / html Dianggap Berbahaya: hixie.ch/advocacy/xhtml
Richard JP Le Guen
75

Ini yang bagus:

Set line-heightsama dengan apapun heightitu; bekerja seperti pesona!

Misalnya:

li {
    height: 30px;
    line-height: 30px;
}
menyeberang
sumber
1
Bisakah Anda menjelaskan dengan contoh kecil?
Leigh
1
Sempurna - tinggi garis: 30px; di floated <li> itulah yang saya butuhkan (Chrome)
GuruBob
1
Apa yang terjadi jika terbagi dalam dua baris?
Mahesh
1
Ya, hanya dapat dijalankan dengan tidak lebih dari satu baris teks.
Wanny Miarelli
1
Ini adalah satu-satunya hal yang berhasil untuk saya. Jawaban lain tidak berhasil.
adev
35

Anda dapat menggunakan flexbox untuk ini.

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

Penjelasan mendetail tentang cara menggunakan flexbox dapat ditemukan di sini .

dimmech
sumber
4

Saya memiliki masalah yang sama. Coba ini.

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