Od provozovatele projektu Rychlost.CZ
WebDev.wiki > Návody pro webmastery a vývojáře > Vystředění prvku na webu

Vystředění prvku na webu - Začínáme s HTML

vydáno: 24.06.2016, seriál: Začínáme s HTML | komentářů: 0

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.

Vodorovné vycentrování prvku

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; .

Zobrazit ukázku
Ukázka:
CSS
.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;
}
Použité vlastnosti: padding, font-size, color, background, margin, width, height, border
HTML
<!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>
Použité tagy: <html>, <head>, <meta>, <title>, <body>, <div>, <p>

Vycentrování prvku absolutním pozicováním

Další možností centrování na střed je absolutní pozicování. Prvku sloupec dáme relativní pozici a odkazovému tlačítku absolutní.

Zobrazit ukázku
Ukázka:
CSS
.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í */
}
HTML
<!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>
Použité tagy: <html>, <head>, <meta>, <title>, <body>, <div>, <p>

Vycentrování textu na střed

Text v našem testovacím sloupci lze vycentrovat za pomocí css vlastnosti text-align: center; . Následuje praktická ukázka.

Zobrazit ukázku
Ukázka:
CSS
#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;
}
Použité vlastnosti: width, height, margin, padding, border, position, text-align
HTML
<!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>
Použité tagy: <html>, <head>, <meta>, <title>, <body>, <div>, <p>

Center

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.

Zobrazit ukázku
Ukázka:
CSS
.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;
}
Použité vlastnosti: padding, font-size, color, background, width, height, margin, border
HTML
<!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>
Použité tagy: <html>, <head>, <meta>, <title>, <body>, <div>, <p>
HTML: návody jak psát html tagy
CSS: návody na kaskádovité styly