O tym co to jest model pudełkowy i jak wyśrodkować element

Są takie zagadnienia CSS, z którymi większość z front-end developerów prędzej czy później będzie musiała sobie poradzić. Mowa tu o np. wyśrodkowywaniu elementów na stronie. Do tego zadania doskonale nadaje się moduł Flexbox czy frameworki typu Bootstrap, jednak w dzisiejszym wpisie pochylam się nad rozwiązaniami, które nie wymagają ich użycia. Na początku jednak chciałbym zwrócić uwagę na jeden z najważniejszych konceptów w CSS, czyli na model pudełkowy i jego konsekwencje.

Spis treści

• Model pudełkowy
• Wyśrodkowanie elementu w poziomie
• Element blokowy
• Element liniowy
• Wyśrodkowanie elementu w pionie
• Element blokowy
• Element liniowy
• Wyśrodkowanie elementu w pionie i poziomie
• Element blokowy i liniowy

Model pudełkowy

Model pudełkowy to schemat, wg którego określane są wielkości części składowych elementu. Elementy prezentowane na stronie nie funkcjonują w próżni i każdy z nich generuje prostokątne pole – pudełko (box). Pudełko składa się z zawartości elementu (content), marginesu wewnętrznego, tj. paddingu, obramowania, czyli borderu oraz marginesu zewnętrznego zwanego margin. Każdy z elementów pudełka jest właściwością elementu, której można nadać pożądaną wartość.

Domyślnie model pudełkowy działa w taki sposób, że jeżeli dla pola o zadeklarowanej przez nas wysokości i szerokości 100px dodamy border o szerokości 5px, to cały kwadrat będzie miał 110px wzdłuż i wszerz.

<style>
  .my-box {
     width: 100px;
    background-color: red;
    height: 100px;
    border: 5px solid black; 
  }
  .centered-item {
    margin: 0 auto;
    width: 150px;
  }
</style>
(...)
<div class="my-box"></div>

Podobnie ustawienie padding wpłynie na wymiary elementu, natomiast ustawienie margin nie daje takiego efektu.

Opisane zachowanie jest konsekwencją właściwości CSS box-sizing, która domyślnie przyjmuje wartość content-box. Aby zmienić to zachowanie tak, żeby szerokość i wysokość elementów zawierały wartości paddingów i borderów należy ustawić właściwość box-sizing na border-box.

<style>
  .my-box {
     width: 100px;
    background-color: red;
    height: 100px;
    border: 5px solid black;
    box-sizing: border-box;
    padding: 10px;
  }
  .centered-item {
    margin: 0 auto;
    width: 150px;
  }
</style>
(...)
<div class="my-box"></div>

Warto zwrócić uwagę, że narzędzia deweloperskie (uruchamiane klawiszem F12 w przeglądarce Chrome) w sekcji Elements pozwalają dokładnie sprawdzić jakie wymiary mają poszczególne składowe każdego pudelka,

Wyśrodkowanie elementu w poziomie

Element blokowy

Najprostszym sposobem na wyśrodkowanie elementu blokowego w poziomie jest ustawienie wartości jego prawego i lewego marginesu na wartość automatyczną, czyli auto. Należy jednak pamiętać, że domyślna szerokość elementu blokowego to 100% elementu rodzica, a w takim układzie nie ma miejsca na marginesy. Należy zatem zmniejszyć szerokość elementu, który chce się wyśrodkować. Poniższy kod

<style>
  .yellow-container {
    background-color: yellow;
    width: 400px;
    height: 50px;
  }
  .centered-item {
    margin: 0 auto;
    width: 150px;
  }
</style>
(...)
<div class="yellow-container">
  <p class="centered-item">Jestem wyśrodkowany</p>
</div>

w przeglądarce wygeneruje poniższy efekt:

Element liniowy

Sposób zaprezentowany powyżej, tj. ustawienie marginesów, nie zadziała dla elementów liniowych. Dla osiągnięcia efektu wyśrodkowania elementu liniowego można posłużyć się właściwością text-align ustawioną na wartość center dla elemencie-rodzica.

<style>
  .green-container {
    background-color: green;
    width: 400px;
    height: 50px;
    text-align: center;
  }
</style>
(...)
<div class="green-container">
  <span>Jestem wyśrodkowany</span>
</div>

Wyśrodkowanie elementu w pionie

Element blokowy

Wyśrodkowanie elementu w pionie wymaga nieco większych kombinacji. Efekt można uzyskać za pomocą deklaracji position: absolute zastosowanej dla wyśrodkowywanego elementu. Takie ustawienie pozwala na pozycjonowanie elementu za pomocą właściwości top, bottom, left oraz right.

Należy pamiętać, że pozycjonowanie elementu-dziecka w taki sposób nie zadziała jeżeli element-rodzic ma właściwość position ustawioną na static. Tutaj uwaga: static jest wartością domyślną właściwości position, co oznacza, że nie trzeba jej deklarować wprost.

Poniższy kod

<style>
  .yellow-container {
    background-color: yellow;
    width: 400px;
    height: 200px;
    position: relative;
  }
  .centered-item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: blueviolet;
    height: 50px;
    width: 100%;
  }
</style>
(...)
<div class="yellow-container">
  <div class="centered-item"></div>
</div>

pozwoli zobaczyć poniższy efekt:

W powyższym przykładzie zastosowałam pusty element <div>, któremu nadałam wysokość i szerokość, aby bardziej uwydatnić pewne zjawisko zachodzące w omawianym przypadku. Wyśrodkowywany element jest z powodu deklaracji top: 50% przenoszony do połowy elementu-rodzica. To oznacza, że górna krawędź elementu-dziecka znajdzie się dokładnie w połowie elementu-rodzica. Z tego powodu w kodzie dodana jest deklaracja transform: translateY(-50%), która przenosi element-dziecko o 50% do góry (znak -) w osi Y. Bez ustawienia właściwości transform powyższy przykład prezentowałby się następująco:

Element liniowy

W przypadku środkowania w pionie dobra wiadomość jest taka, że sposób opisany dla elementu blokowego działa również dla elementu liniowego. Tak więc poniższy kod

<style>
  .green-container {
    background-color: green;
    width: 400px;
    height: 50px;
    position: relative;
  }
  .centered-item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
(...)
<div class="green-container">
  <span class="centered-item">Jestem wyśrodkowany</span>
</div>

wygeneruje poniższy widok:

Wyśrodkowanie elementu w pionie i poziomie

Element blokowy i liniowy

Najprościej osiągnąć ten efekt stosując rozwiązanie zaproponowane dla wyśrodkowania w poziomie, podając wartość właściwości left i modyfikując nieco właściwość translate:

<style>
  .yellow-container {
    background-color: yellow;
    width: 400px;
    height: 200px;
    position: relative; 
  }
  .centered-item {
    position: absolute;
    background-color: blueviolet;
    height: 100px;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
  }
</style>
(...)
<div class="yellow-container">
  <div class="centered-item"></div>
</div>