11 января 2008
Выравнивание div по центру страницы или экрана – это частая проблема, и для её решения требуется некоторое время. И для того чтобы Вы не теряли его, я решил продемонстрировать решение данной задачи. Во-первых, надо создать три div’а, то есть в первый вставить два других. Далее первому задать атрибут align=”center” и дополнительные стили CSS , второй не трогать, а третий будет являться так называемой линией горизонтального выравнивания.
Результат нижеприведенного HTML-кода:
HTML-код выравнивания содержимого:
[code]
<style type="text/css">
.container {
display: table-cell;
vertical-align: middle;
width: 640px;
height: 180px;
border: 5px dashed black;
}
.auxiliary {
display: inline-block;
vertical-align: middle;
width: 0px;
height: 100%;
}
.container .block {
display: inline-block;
vertical-align: middle;
}
.container .block, .auxiliary {
display: inline;
}
.container .block div {
font-size: 40px;
background: red;
width: 200px;
height: 50px;
} </style>
</p>
<div align="center" class="container">
<div class="block">
<div>
центр</div>
</div>
<div class="auxiliary">
</div>
</div>
<p>
[/code]
Протестировано в:
- Mozilla Firefox 2.x, 3.0, 3.6;
- Safari 3 и выше;
- Opera 9.64, 10.1, 10.5;
- Chrome 3.0, 4.0, 5.0.
Наши клиенты
-
Звоните!
+7 (812) 318-40-34 +7 (499) 288-16-43
+7 (499) 288-15-30 -
Пишите!
info@webering.ru -
Приезжайте!
-
г. Санкт-Петербург, ул. Седова, д. 11, лит. А, оф. 642 БЦ «Эврика» г. Москва, ул. Бутлерова, д. 17, оф. 5115 БЦ «NEO GEO»
-
Наш офис расположен в 5 минутах от станции метро «Елизаровская» в бизнес-центре «Эврика».
