vertical-align и DOCTYPE
Следующий код прекрасно работает, выравнивая вложенный блок child по центру вертикали:
<!-- <!DOCTYPE html> -->
<html>
<head>
<title>Заголовок</title>
</head>
<style>
.child{
width: 400px;
height: 100px;
display:inline-block;
vertical-align:middle;
}
.helper{
display:inline-block;
vertical-align:middle;
height:100%;
width:0px;
}
.parent{text-align: center;}
</style>
<div class="parent">
<div class="child">Text</div>
<div class="helper"></div>
</div>
</html>
Но если раскоментировать <!DOCTYPE html>, или объявить любой другой тип DOCTYPE, вертикальное выравнивание пропадает. Как же увязать вместе vertical-align и DOCTYPE? |
Цитата:
|
Вот именно, а я хотел сверстать без таблиц, только на div-ах, это вообще возможно? Потому что даже хаки не помогают.
Не хотелось бы выбирать между <!DOCTYPE html> и дивной версткой. |
Цитата:
|
Нет, я без предрассудков :no:
Просто не хочется чтобы народные массы разработчиков в меня экскрементами кидались при просмотре моего кода, ибо он публичен. Так сказать для успокоения совести надо. И вот оказывается, даже такую элементарщину, как выравнивание по высоте не сделать на css без геморроя :( |
Цитата:
|
Сталкивался с такой проблемой, командой vertical-align выравнить div нельзя, насколько я понимаю этой командой выравнивается только строчные теги и таблицы, могу чуть попозже покапаться и посмотреть как то что Вы хотите сделать div`ами.:write:
|
Platypus,
Да, я был бы признателен, честно говоря. |
LRCenter, вопрос Вам нужен именно в такой структуре сделать или какая то другая, если да, покажите примерно как она должна выглядеть!
|
Именно в такой.
|
При апсолютном позиционировании это должно выглядеть примерно так(как я понял класс helper нужен только для помощи в выравнивании т.к. он не понадобился сделал без него, если не так поправь меня):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Заголовок</title>
</head>
<style>
.child{
width: 400px;
height: 100px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
text-align: center;
border: 1px solid black;
}
.parent{
margin:0;
padding:0;
width:100%;
height:100%;
background:#000;
}
</style>
<div class="parent">
<div class="child">Text</div>
</div>
</html>
|
Platypus,
У .parent должна быть position:relaive; - иначе .child позиционируется относительно окна браузера И сколько не пробовали, без скриптов, в инете все же лучший кроссбраузерный и самый простой способ: в качестве .parent вставлять одноячеистую таблицу, остальные способы - зависят от высоты .child, что не айс при заранее неизвестном кол-ве контента. |
Цитата:
Согласен, но тут уже зависит от задачи! |
Цитата:
|
Мда, интересный пример, но все же все не так просто как хотелось бы.
|
| Часовой пояс GMT +3, время: 19:29. |