jenkings 121 Odesláno: 21. Říjen, 2012 Share Odesláno: 21. Říjen, 2012 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 . 1 Link to comment Share on other sites More sharing options...
Huzy 11 Odesláno: 13. Listopad, 2014 Share Odesláno: 13. Listopad, 2014 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 More sharing options...
Fakerko_ 190 Odesláno: 13. Srpen, 2015 Share Odesláno: 13. Srpen, 2015 (upraveno) Já bych to udělal spíše takto: element { position: absolute; top: 50%; left: 50%; transform: translateY(-50%); transform: translateX(-50%); } Edited 13. Srpen, 2015 by Petr Hnátek Link to comment Share on other sites More sharing options...
Recommended Posts