Jump to content

návod [Mini TUT] Vertikální a horizontální vycentrování


jenkings

Recommended Posts

Vertikální a horizontální vycentrování

 

Určitě jste někdy potřebovali umístit nějaký prvek přesně doprostřed stránky.

Tady máte mini TUT jak na to:

 

Ná stránce máme například tento DIV:

 

<div id="content">
</div>

 

Pokud ho tedy chceme umístit vertikálně i horizontálně doprostřed stránky , stačí použít tento krátký CSS kód:

 

#content {
position: absolute; /*Dovolí nám posunout prvek z původního místa*/
top: 50%; /*Posuneme prvek o 50% dolů od horní hrany*/
left: 50%; /*Posuneme prvek o 50% doprava od levé hrany*/
width: 100px; /*Šířka*/
height: 200px; /*Výška*/

/*Tady posuneme obrázek ještě o polovinu šířky doleva a o polovinu výšky nahoru*/
margin-top: -100px;
margin-left: -50px;

/*Teď je prvek přesně uprostřed stránky. Dále si můžete dopsat ještě další vlastnosti prvku*/

background-color:red;
}

 

 

Doufám že vám tento Mini TUT pomohl. Případné dotazy pište do tohoto topicu .

  • Líbí se mi to! (+1) 1
Link to comment
Share on other sites

  • 2 years later...

Tak jsem to zkusil použít, ale bohužel objekt je posunutý doprava.

#rect {

  position: absolute; 
  top: 50%; 
  left: 50%; 
  margin-top: -100px;
  background-color: black;
  width: 800px;
  border-radius: 20px 20px 20px 0px;
}

Link to comment
Share on other sites

  • 8 months later...

Já bych to udělal spíše takto:

element
{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
}
Edited by Petr Hnátek
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
×
×
  • Create New...