Простой вопрос, но который регулярно задают: как выровнять блочный элемент (div или table, в зависимости от того, что вы используете в качестве контейнера) посередине экрана?
Ответ как всегда прост донельзя:
- Если вы работаете в режиме поддержки стандартов и не рассматриваете браузеры, старше IЕ6, то достаточно написать блоку свойство
margin: 0 auto
. - Если же вы верстаете в quirks mode или в требованиях в верстке есть поддержке IЕ 5, то вам придется для родительского, относительно вашего искомого контейнера добавить свойство
text-align: center
Кагбэ демо
DEMO-box
Финальный стиль
.context-wrap {
border:1px solid #000;
padding:1em;
text-align:center;/*для IЕ в quirks mode
и для IЕ младше IЕ6*/
}
.context-box {
border:1px solid red;
margin:0 auto;/* для нормальных браузеров
и для IЕ в strict mode*/
padding:1em;
text-align:left;
width:50%;
}
P.S. Раньше, когда CSS мало кто знал и использовал вопрос решался прописыванием элементу HTML-атрибута align="center"