ваш Q # 1 получил ответ @ тридцатьdot , IE7 и ниже не поддерживает свойства таблицы CSS, поэтому для них нужно найти другой способ. и его метод абсолютного позиционирования обычно является предпочтительным способом сделать это, так как в большинстве случаев в подобном сценарии (заставка?) ширина и высота центрированного содержимого будут известны.
дополнение к комментариям:
В ответ на вопрос, почему он работал в IE6, а не в IE7, хотя IE6 также не поддерживает свойства таблицы, IE7 фактически выбрал правило position: static из правила #middle[id] {} - IE7 действительно понимает этот тип селектора, так что означает, что позднее абсолютное / относительное позиционирование не работало так же, как в IE6
Принимая во внимание вышеизложенное, переделывая CSS, чтобы убедиться, что IE7 и 6 получили один и тот же CSS и что он был позже помещен в каскад для переопределения «хорошего» CSS, оказывается, что метод позиционирования тоже не зависит от высоты, в В комментариях есть различные ссылки, чтобы проверить это, но вот окончательная рабочая версия:
Ячейка гибридного стола / метод позиционирования: здесь
Эта скрипка включает в себя ширину и высоту изображения, но если вы удалите их и расположение для «подтекста», то оно (или должно) показать, что все, что находится в середине, остается в центре
HTML используется так же, как и нижняя часть этого ответа. минус дополнительный <i></i> элемент
CSS:
html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000; }
#outer {
position: relative;
width: 100%;
height: 100%;
display: table;
}
#middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#c {
width: 385px;
height: 120px;
margin: 0 auto;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
*position: absolute;
*top: 50%;
*width: 100%;
*text-align: center;
}
#c {
*position: relative;
*top: -50%;
}
/**** end IE7 and below rules ****/
#c div {
position: relative;
top: 100px;
width: 100%;
color: #666;
font-weight: bold;
font-family: serif;
font-size: 12px;
text-align: right;
}
#footer {
width: 100%;
text-align: center;
height: 15px;
padding: 5px 0 0 0;
margin: -20px auto 0 auto;
border: 0;
background-color: #def;
}
#footer div {
padding: 0px 5px 0px 5px;
text-align: right; font-size: 10px;
font-family: sans-serif;
}
#footer p {margin: 0;}
Как отмечено в комментариях, используя технику, которую шаблон HTML5 использует для классификации элемента HTML, условно см .:
Условные таблицы стилей против хаков CSS?
Ответ: Ни один!
означает, что вы можете заменить взломы IE7 на:
.ie6 #middle, .ie7 #middle {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
.ie6 #c, .ie7 #c {
position: relative;
top: -50%;
}
Оригинальная альтернатива - "Спичечная техника"
Вероятно, вы могли бы смешать следующую технику с техникой "табличных ячеек" с помощью условных комментариев или хаков, но эта (хакерская!) Техника работает в браузере, насколько мои тесты видели
Поскольку вы просили версию, не зависящую от высоты ... вам может или не может понравиться техника "спички", это включает использование встроенных блоков и выравнивание их ... "спичка" пуста на 100%, выкл. page, элемент inline-block с его вертикальным выравниванием, установленным в "middle", как только он будет на месте, следующий inline-block (ваш фактический div содержимого) будет расположен рядом с ним и выровнен по центру или ему, затем с помощью text-align: center; на нем вы иметь горизонтальное центрирование тоже
Примечание: я оставил ваши ширины без изменений, но вы можете протестировать без ширины / высоты, убрав значение высоты и ширины с #c, а также удалить CSS для текстового div * #c div - в текстовом сценарии введите текст в любом из этих div'ов должен центрироваться автоматически.
и особенно обратите внимание на вставку дополнительного <i></i> HTML прямо во внешний div (вероятно, поэтому это не предпочтительный метод!), Это «спичка», которая поддерживает всю открытую страницу.
Код, используемый в скрипте:
html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }
#outer { position: relative; width: 100%; height: 100%;}
/* a matchstick spacer */
#outer i {
display: inline-block;
height: 100%;
width: 1px;
margin-left: -1px; /* to hide off page */
margin-right: -4px; /* to remove spacing between this and #middle block */
vertical-align: middle; /* will make inline block next to it center vertically */
background: #f00; /* red, not required just to see or not see it */
}
#middle {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}
/* image 385 * 120 */
#c {
display: inline-block;
/* presuming image heights, but it wouldn't matter if there was width/height here or not */
width: 385px;
height: 120px;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
#middle, #c { /* IE hack for inline block on block level elements */
*display: inline;
}
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
HTML:
<div id="outer">
<i></i>
<div id="middle">
<div id="c"><div>
because history is important!
</div></div>
</div>
</div>
<div id="footer">
<div>
<p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;"><a href="http://przemoc.net/">Przemoc's network</a></p>
</div>
</div>