Выравнивание с помощью css свойства table и expression для ИЕ 7. Предположим, что у нас стоит задача выровнять абзац с текстом по вертикали относительно элемента с заранее известными размерами.

Сначала создадим html разметку:

<div class="conteiner_wrap">
<p">Абзац текста, который требуется выровнять по вертикали относительно серого блока.</p">
</div>

К блоку с классом conteiner_wrap и абзацу с текстом применим следующие стили:

.conteiner_wrap {
padding:10px; /*что бы текст не прилегал к краям основного блока*/
width: 150px; /*ширина основного блока*/
height: 250px; /*высота основного блока*/
background: #eee; /*цвет фона задан для наглядности*/
position: relative; /*выдергиваем блок из потока*/
display: table; /*блок будет отображаться как табличный*/
}
.conteiner_wrap p {
display: table-cell; /*абзац будет отображаться как ячейка таблицы (TD)*/
vertical-align: middle; /*выравниваем абзац по вертикали*/
text-align: center; /*выравниваем абзац по горизонтали*/
}

optimization codeЕсли требуется, что бы блоков было несколько и они выстраивались друг за другом, следует основному контейнеру conteiner_wrap добавить css свойство float:left;. Для наглядности в примере ниже выводятся три блока с текстом.

__________________________________________________________________________________________________________________

скачать joomla | обновление joomla | модуль joomla | администрирование | seo продвижение | joomla магазиншаблоны сайтов

обратная связь 

При копировании материала ссылка на сайт joomla4.ru обязательна.