Rumah > hujung hadapan web > tutorial css > Bagaimana Memusatkan Item Senarai Secara Menegak () Di Dalam Senarai Tidak Tertib Mendatar ()?

Bagaimana Memusatkan Item Senarai Secara Menegak () Di Dalam Senarai Tidak Tertib Mendatar ()?

DDD
Lepaskan: 2024-10-31 21:13:29
asal
834 orang telah melayarinya

How to Vertically Center List Items () Inside a Horizontal Unordered List ()?

Menjajarkan Menegak

  • Elemen dalam

      Penjajaran menegak bagi

    • elemen di dalam
        mendatar; selalunya diperlukan untuk estetika dan kebolehgunaan. Berikut ialah penyelesaian:

        CSS boleh digunakan untuk menetapkan ketinggian garisan

      • elemen sama dengan ketinggiannya, seperti di bawah:

        <code class="css">li {
            height: 30px;
            line-height: 30px;
        }</code>
        Salin selepas log masuk

        Dalam kod yang anda berikan:

        • Setiap
        • mempunyai ketinggian 100px.
        • Butang mempunyai ketinggian yang berbeza iaitu 50px (diberikan oleh butang .kelas).

        Untuk memusatkan kandungan secara menegak, anda harus menambah ketinggian baris berikut nilai pada lembaran gaya anda:

        <code class="css">.toolbar li {
            line-height: 100px; /* For regular list items */
        }
        .toolbar li.button {
            line-height: 50px; /* For button list items */
        }</code>
        Salin selepas log masuk

        Ini akan memastikan semua item senarai dan kandungannya diletakkan secara menegak di tengah.

        Atas ialah kandungan terperinci Bagaimana Memusatkan Item Senarai Secara Menegak () Di Dalam Senarai Tidak Tertib Mendatar ()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

  • sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan