Jak wyśrodkować listę poziomą w Div w CSS

Autor: Laura McKinney
Data Utworzenia: 2 Kwiecień 2021
Data Aktualizacji: 22 Listopad 2024
Anonim
How to Center in CSS - EASY ( Center Div and Text Vertically and Horizontally )
Wideo: How to Center in CSS - EASY ( Center Div and Text Vertically and Horizontally )

Zawartość

Podczas tworzenia strony internetowej przydatne może być użycie CSS do wyśrodkowania listy poziomej, takiej jak menu klikalne. Możesz użyć CSS, który jest językiem arkusza stylów, obok HTML, aby kontrolować wygląd swojej strony. Style CSS są często wyświetlane nieprzewidywalnie w różnych przeglądarkach internetowych, dlatego ważne jest, aby dokładnie przetestować stronę przed jej opublikowaniem. Lista nieuporządkowana (ul) jest elementem na poziomie bloku, więc można użyć właściwości width, aby utworzyć efekt scentralizowany.


Instrukcje

Możesz użyć CSS i HTML, aby kontrolować wygląd swojej strony internetowej (Comstock / Stockbyte / Getty Images)

  1. Otwórz plik HTML w edytorze tekstu, takim jak Notatnik systemu Windows.

  2. Dodaj wymagane style CSS do listy poziomej w sekcji „” pliku HTML, dodając następujący kod:

    type = "text / css"> .myclass {text-align: center; } .myclass ul {width: 275px; margin: 0px auto} .myclass li {display: block; float: left; wysokość: 50px; line-height: 50px; margin: 5px; szerokość: 125px; obramowanie: jednolity 1px czarny; }

    Szerokość listy (ul) reprezentuje sumę szerokości i marginesów elementów poziomych (li).

  3. Utwórz listę poziomą w sekcji „>” pliku HTML, dodając następujący kod:

    • pierwszy przedmiot
    • drugi element w div

    Tag „ul” określa nieuporządkowaną listę. Znacznik „li” odpowiada elementowi na liście. Elementy listy używają stylów CSS zgodnych ze zdefiniowanymi powyżej.


  4. Zapisz plik HTML i załaduj go na serwerze WWW, aby wyświetlić poziomą, wyśrodkowaną listę.