Способ проще существует.
Код:
<div class="box">
<p class="framebox">Выравниваем по середине</p></div>
В CSS пишем так:
Код:
.box {text-align:center;}
.framebox {
display:inline; /*makes string element from block element*/
padding: 5px;
background:#ccffee;
text-align: center;
border:#5577ff 2px solid;}
Не знаю как вам, лично мне не нужен тупо ответ да ещё с комментарием "Всё очень просто". Приятнее ПОНЯТЬ почему всё это работает.
Для моего решения. Вся суть в том, что блочный элемент меняется на строчный (display:inline
, а для строчных элементов размер по горизонтали определяется его содержимым, а не размерами родительского бокса.
Бокс обёртка <div> выравнивает своё содержимое по середине.
Может я где-то в понятиях и ошибся, но суть, думаю, передал правильно.