Comment on page
Jak wyśrodkować elementy w pionie i poziomie?
Częstym problemem w kodowaniu layoutu strony jest środkowanie elementów. Poinstruowanie przeglądarki, aby umieściła nasz wybrany element w konkretnym miejscu, wydaje się dość skomplikowanym zadaniem.
W tym rozdziale postaramy się pokazać Wam, że nie jest to wcale takie trudne i wystarczy poznać kilka prostych technik, aby stać się mistrzem środkowania w CSS.
To, jakiej techniki środkowania w poziomie użyć zależy w dużej mierze od tego, czy nasz element jest elementem blokowym czy liniowym (lub liniowo-blokowym).
- Jak wyśrodkować element blokowy? Wystarczy nadać mu określoną szerokość oraz automatycznie wyliczone marginesy po lewej i prawej.
<div class="container">
<div class="center-me">
Jestem elementem blokowym
</div>
</div>
.center-me {
background: lightgreen;
height: 100px;
width: 300px;
margin: 0 auto; /* Środkuję blokowy element */
}
Jestem elementem blokowym
- Jeśli nasz element jest liniowy (lub liniowo-blokowy), sztuczka z automatycznymi marginesami nie zadziała. Należy go wtedy potraktować jako zwykły tekst i wycentrować w odpowiedni temu sposób.
<div class="container">
<div class="center-me">
Jestem elementem liniowo-blokowym
</div>
</div>
/*
Ważne, aby wyśrodkowanie
zdefiniować na elemencie otaczającym
*/
.container {
text-align: center;
}
.center-me {
display: inline-block;
background: lightgreen;
height: 100px;
width: 300px;
}
Jestem elementem liniowo-blokowym
Środkowanie elementów w pionie jest nieco bardziej skomplikowane, niż środkowanie w poziomie. Techniki środkowania w pionie dla elementów liniowych wymagają już nieco wprawy i zaawansowania w CSS, to samo dotyczy elementów blokowych, których wymiary nie są określone wprost. Wszystkich ambitnych, którzy chcą zapoznać się z tajnikami środkowania, odsyłamy do artykułu na CSS Tricks.
Dowiedzmy się zatem, w jaki sposób wyśrodkować element blokowy o znanej wysokości.
<div class="container">
<div class="center-me">
Jestem wyśrodkowany w pionie
</div>
</div>
.container {
position: relative;
}
.center-me {
background: crimson;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px; /* 200px / 2 = 100px */
}
Jestem wyśrodkowany w pionie
Powyższa technika bazuje na pozycjonowaniu. Aby wyśrodkować element w pionie, musimy najpierw umieścić jego górną krawędź 50% od góry kontenera. W tym momencie element nie będzie jeszcze wizualnie wyśrodkowany, należy go wtedy przesunąć do góry o połowę jego wysokości. Przydatne tu okazują się ujemne marginesy.
Last modified 3yr ago