CSS выравнивание по центру: по ширине и по высоте. Вариант 2
С помощью CSS, элемент выравнивается по центру: по ширине и по высоте. Для выравнивания по высоте используется spacer.
HTML code:
<div class="example">
<div class="spacer"></div>
<div class="wrapper">
<div class="content"></div>
</div>
</div>
</div>
CSS code:
.spacer {height: 50%; width: 40px; margin-bottom: -20px; background: #999;}
.wrapper {height: 40px; width: 100%; clear: both; background: #6c9;}
.content {height: 40px; width: 40px; margin: 0 auto; background: #c00;}
Этот метод работает и в более старых браузерах, таких как Internet Explorer 6 или ранние версии Maxthon. Но высота контейнера, в котором находится содержимое страницы, должна быть с явно заданными размерами и если они меняются, то величина margin-bottom блока .spacer так же должна быть соответственно изменена. С точки зрения сопровождения, более удобен другой способ, который, однако, уже не будет работать в Internet Explorer 6 или в ранних версиях Maxthon.
Поддержка в браузерах
- Windows
- Internet Explorer 5.01+
- Firefox 1.0+
- Google Chrome
- Opera 7.03+
- Safari 3.1+
- SeaMonkey 1.0+
- Mozilla 1.5+
- Netscape 7.2+
- Linux
- Firefox 1.0+
- Google Chrome / Chromium
- Opera 7.03+
- SeaMonkey 1.0+
- Mozilla 1.5+
- Netscape 7.2+