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

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