#1 Zarovnání
Kromě použití klasičtějších metod, jako je flex nebo grid, lze prvky či text zarovnávat také jinými způsoby, které mají naopak své výhody.
#2 Zarovnání textu
Vodorovně
Vlastnost spojená s textem – text-align – slouží k zarovnání textu vně prvku, na jakoukoli stranu na vodorovné ose. Lze ji definovat kterémukoliv prvku, ale aplikovat se budou pouze tehdy, obsahuje-li prvek text.
.odstavec {
text-align: center;
}
Vertikálně
Nachází-li se text v prvku (<span>, <p> apod.), lze mu přiřadit vlastnost padding, například s hodnotou 50px 0, která mu definuje, že nad a pod sebou bude mít 70px odsazení.
p {
padding: 50px 0;
}
#3 Zarovnání prvku
Vodorovně
Zarovnat prvek vodorovně lze pomocí vlastnosti margin, do které se vloží klíčové slovo, hodnota auto. Hodnota auto způsobí, že vnější odsazení (margin) vyplní všechen volný prostor, který se vedle něj nachází – vyrovná tak prvek na střed.
#middle {
margin: auto;
width: 100px;
}
Vertikálně
Zarovnání prvku na horizontální ose se často neprovádí jinak než pomocí flexboxu, avšak lze využít vlastností position a transform. Jedinou podmínkou je, že se prvek, který chceme dát na střed, musí nacházet v dalším prvku, nejlépe se specifikovanou výškou a šířkou. Spolu tyto vlastnosti vycentrují prvek na horizontální ose…
#obal {
height: 200px;
width: 200px;
position: relative;
}
#obal #stred {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
…nebo lze také pomocí nich vycentrovat prvek na obou osách. V tom případě se přidá i levá strana a upraví se vlastnost transform:
#obal #stred {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}