Столкнулся с проблемой выравнивания по вертикали. Решение и код CSS
По горизонтали выравнивается всё просто, достаточно в CSS прописать код
10px — отступ сверху, auto — со всех остальных сторон.
Вот здесь пришлось помучиться, поискать.
left: 50%; top: 50% выравнивают левый верхний угол div'а по центру страницы — полширины и полвысоты окна, а чтобы получить «настоящую» центровку, нужно от текущей позиции дива отнять его личные полвысоты и полширины. это делается через margin-top: -[полвысоты]px; margin-left: -[полширины]px.
Выравнивание по горизонтали
По горизонтали выравнивается всё просто, достаточно в CSS прописать код
.NaschClass{
margin: 10px auto;
}10px — отступ сверху, auto — со всех остальных сторон.
Выравнивание по вертикали
Вот здесь пришлось помучиться, поискать.
<!doctype html>
<head>
<title>Выравнивание по вертикали</title>
<style type="text/css">html, body {
height: 100%; background: black
}
#msg {
width: 300px;
line-height: 100px;
position: absolute;
left: 50%; top: 50%;
margin: -50px 0 0 -150px;
background: yellow;
font-weight: bold;
text-align: center }</style>
</head>
<div id="msg">Under construction</div>
left: 50%; top: 50% выравнивают левый верхний угол div'а по центру страницы — полширины и полвысоты окна, а чтобы получить «настоящую» центровку, нужно от текущей позиции дива отнять его личные полвысоты и полширины. это делается через margin-top: -[полвысоты]px; margin-left: -[полширины]px.
sfi0zy
Вариантов выравнивания всего по центру в CSS немного больше одного и в зависимости от ситуации будет уместно использовать разные подходы. Советую почитать Centering in CSS: A Complete Guide.