Toto je 14. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Toto je 14. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
V tomto díle se zaměříme na způsoby centrování prvků na webu a centrování textu.
Příkladem pro centrování nám bude blok s textem a rámečkem. Zápis pro vodorovné centrování je v css margin: 0 auto; .
.text-cerny{padding: 10px 15px;font-size: 16px;color: #fff;background: #000;margin: 0 auto; /* Vodorovně vycentruje blok s textem. Ze shora i zespoda bude odsazení 0px */width: 350px;height: auto;}#sloupec {width: 800px;height: auto;margin: 20px auto;padding: 10px;border: 1px solid #000;}
<!DOCTYPE html><html lang="cs-CZ"><head><meta charset="utf-8"><title>Horizontální centrování</title></head><body><div id="sloupec"><p class="text-cerny">Text černého odstavce, který je vycentrován ve sloupci.</p></div></body></html>
Další možností centrování na střed je absolutní pozicování. Prvku sloupec dáme relativní pozici a odkazovému tlačítku absolutní.
.blok-text{padding: 10px;width: 400px;height: auto;font-size: 16px;color: #fff;background: #000;border-radius: 5px;margin: 0 0 0 -210px; /* Polovina šířky + 10px odsazení */position: absolute; /* Absolutní pozicování */top: 20px;left: 50%;right: 50%;}#sloupec {width: 800px;height: 300px;margin: 20px auto;padding: 10px;border: 1px solid #000;position: relative; /* Nadefinování relativního pozicování */}
<!DOCTYPE html><html lang="cs-CZ"><head><meta charset="utf-8"><title>Horizontální centrování</title></head><body><div id="sloupec"><p class="blok-text">Text v černém poli, vycentrovaný na střed za pomocí absolutního pozicování.</p></div></body></html>
Text v našem testovacím sloupci lze vycentrovat za pomocí css vlastnosti text-align: center; . Následuje praktická ukázka.
#sloupec {width: 800px;height: 300px;margin: 20px auto;padding: 10px;border: 1px solid #000;position: relative; /* Nadefinování relativního pozicování */}p.blok-text {text-align: center;}
<!DOCTYPE html><html lang="cs-CZ"><head><meta charset="utf-8"><title>Horizontální centrování textu</title></head><body><div id="sloupec"><p class="blok-text">Text vycentrovaný na střed za pomocí text-align: center; .</p></div></body></html>
V minulosti se pro vycentrování obsahu používal HTML tag <center>. Jedná se o tag párový. Následující ukázka Vám ukáže, jak fungoval. Zda je vhodné ještě dnes ho používat záleží jen na Vás.
.text-cerny{padding: 10px 15px;font-size: 16px;color: #fff;background: #000;width: 300px;height: auto;}#sloupec {width: 800px;height: auto;margin: 20px auto;padding: 10px;border: 1px solid #000;}
<!DOCTYPE html><html lang="cs-CZ"><head><meta charset="utf-8"><title>Horizontální centrování</title></head><body><div id="sloupec"><center><p class="text-cerny">Text černého odstavce, který je vycentrován ve sloupci za pomocí center tagu.</p></center></div></body></html>
