Выравнивание div по центру страницы или экрана – это частая проблема, и для её решения требуется некоторое время. И для того чтобы Вы не теряли его, я решил продемонстрировать решение данной задачи. Во-первых, надо создать три div’а, то есть в первый вставить два других. Далее первому задать атрибут align=”center” и дополнительные стили CSS , второй не трогать, а третий будет являться так называемой линией горизонтального выравнивания.
Результат нижеприведенного HTML-кода:
центр
HTML-код выравнивания содержимого:
<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>
Протестировано в:
- Mozilla Firefox 2.x, 3.0, 3.6;
- Safari 3 и выше;
- Opera 9.64, 10.1, 10.5;
- Chrome 3.0, 4.0, 5.0.
Поделиться
Следующий пост →
