poniedziałek, 2020-11-02

CSS: Środkowanie elementów

Środkowanie elementów w CSS jest łatwe do osiągnięcia i niezgodny z duchem języka HTML5 znacznik <center> nie jest do niczego potrzebny. Język CSS jest aktywnie rozwijany i artykuł nie wyczerpuje jego wszystkich możliwości w zakresie środkowania elementów.

Wyśrodkowanie wierszy tekstu

Tekst w akapitach, nagłówkach i innych elementach można wyśrodkować za pomocą dostępnej w języku CSS własności text-align.

<p>Efekt „Zebra” polega na ustawieniu....</p>

p {
  text-align: center;
}

Środkowanie elementów blokowych

Realizacja tego zadania jest możliwa do uzyskania za pomocą ustawionych automatycznie marginesów. Pewną wadą tego rozwiązania jest konieczność określenia szerokości elementu. Zapis „margin: 0 auto” oznacza, że górny i dolny margines elementu wynosi zero, a lewy oraz prawy przyjmie wartości automatyczne, Jeśli element jest węższy niż jego znacznik nadrzędny, taka deklaracja da efekt wyśrodkowania.

<div>Efekt „Zebra” polega na ustawieniu....</div>

div {
  width: 400px;
  margin: 0 auto;
}

Wyśrodkowanie obrazu

Obrazy środkowane są podobnie jak elementy blokowe. Obraz domyślnie nie jest znacznikiem blokowym i trzeba ustawić tę własność. Nie jest wymagane określenie szerokości.

<img src="obraz.jpg" alt="Slajd">

img {
	display: block;
	margin: 0 auto;
}