Egoblog.cz - Petr Kobelka

HTML:Správné zarovnání DIVu na střed!

Už více krát jsem se setkal s dotazem, jak správně zarovnávat DIV na střed stránky. V Tomto postu Vám ukážu jak na to.


Webdesign | Komentáře (0) | Shlédnuto 4206 × | Vloženo: 8. září 2013

První, co je třeba si uvědomit je, že budete muset udělat dvojí práci. Je to z důvodu toho, že internetové prohlížeče rodiny MSIE (Internet Explorer 7 a starší. Novější by už to měly umět normálně) pracují v zarovnávání bloků trochu jinak. Tedy vlastně neumí správně vyhodnotit CSS direktivnu margin-right:auto. Druhý kus se pak týká všech ostatních prohlížečů, které tuto vlastnost CSS dokážou správně interpretovat.

Jak se to dělá v IE7 a starší?

Blok, který chcete umístit na střed musí být uvnitř jiného bloku, který má nastavenu vlastnost

text-align:center

Nyní si ukážeme, jak se to provede na konkrétním příkladě

V HTML to vypadá následovně:

<div class="BLOK-1">
  <div class="BLOK-2">
  </div>
</div>

V CSS máte tento zápis:

.BLOK-1{
width:500px;
height:200px;
text-align:center;
position:relative;
background-color:#1C93C6;
}
.BLOK-2{
width:250px;
height:100px;
position:relative;
background-color:#33CC33;
}

A praktická ukázka:

Jak se to dělá ve Firefox, Chrome, Opera a další?

Danému bloku stačí anstavit CSS vlastnost

margin: 0 auto;

První údaj vyjadřuje odsazení zvrchu a spodu, druhý údaj vyjadřuje odsazení zleva a zprava.

V HTML to vypadá následovně:

<div class="BLOK-3">
  <div class="BLOK-4">
  </div>
</div>

V CSS máte tento zápis:

.BLOK-3{
width:500px;
height:200px;
position:relative;
background-color:#1C93C6;
}
.BLOK-4{
width:250px;
height:100px;
position:relative;
margin:0 auto;
background-color:#33CC33;
}

A praktická ukázka:

Podobné články jako "HTML:Správné zarovnání DIVu na střed!"

Petr Kobelka | Egoblog.cz | Tvorba www stránek - www.petrkobelka.cz

Petr Kobelka
Autor je zkušeným web developerem a programátorem s více než 10 letými zkušenostmi. Pracuje jako programátor pro známou Olomouckou společnost zabývající se tvorbou internetových a intranetových řešení. Spolu se zaměstnáním pracuje na volné noze a zabývá se tvorbou internetových stránek. Ve volném čase rád fotí, jezdí na kole, plave a cestuje.

Komentáře

E-mail je potřeba pouze pro vygenerování Gravataru!

Oups, žádné komentáře? Buďtě první !!!

Blog píše Petr Kobelka

Petr Kobelka - egoblog.cz

Žádám všechny, kteří mají zájem vkládat komentáře, aby se řídili pravidly NETikety. Komentáře, porušující tato pravidla můžou být bez varování smazány.