Bagaimana untuk memusatkan senarai mendatar dalam Div di CSS

Pengarang: Laura McKinney
Tarikh Penciptaan: 2 April 2021
Tarikh Kemas Kini: 10 Jun 2024
Anonim
How to center a div within another div using HTML and CSS
Video.: How to center a div within another div using HTML and CSS

Kandungan

Apabila membuat halaman web, mungkin berguna untuk menggunakan CSS untuk memusatkan senarai mendatar, seperti menu yang boleh diklik. Anda boleh menggunakan CSS, yang merupakan bahasa helaian gaya, di sebelah HTML untuk mengawal penampilan halaman anda. Gaya CSS sering dipaparkan secara tidak terduga di pelayar web yang berbeza, jadi penting untuk menguji halaman anda dengan teliti sebelum menyiarkannya. Senarai yang tidak disusun (ul) adalah elemen peringkat blok, jadi anda boleh menggunakan sifat lebar untuk membuat kesan terpusat.


Arahan

Anda boleh menggunakan CSS dan HTML untuk mengawal penampilan halaman web anda (Comstock / Stockbyte / Getty Images)

  1. Buka fail HTML anda dalam editor teks, seperti Windows Notepad.

  2. Tambahkan gaya CSS yang diperlukan ke senarai mendatar di bahagian "" dari fail HTML anda dengan menambahkan kod berikut:

    type = "text / css"> .myclass {text-align: center; } .myclass ul {width: 275px; margin: 0px auto} .myclass li {display: block; terapung: kiri; ketinggian: 50px; garis ketinggian: 50px; margin: 5px; lebar: 125px; sempadan: pepejal 1px hitam; }

    Lebar senarai (ul) mewakili jumlah lebar dan margin item mendatar (li).

  3. Buat senarai mendatar di bahagian ">" fail HTML dengan menambah kod berikut:

    • barang pertama
    • item kedua dalam div

    Tanda "ul" menentukan senarai tidak teratur. Tag "li" sepadan dengan item dalam senarai. Item senarai menggunakan gaya CSS yang sepadan dengan yang dinyatakan di atas.


  4. Simpan fail HTML dan muatkannya pada pelayan web anda untuk melihat senarai mendatar, berpusat.