Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
CSS и Верстка /

Методы вертикального центрирования с помощью CSS. Метод line-height

  • Четверг, 29 сентября 2012, 08:16 |
  • Автор: falkovsky |
  • Просмотров: 1355 |
  • Комментарии: 2 |
  • В закладки:
Если перед вами стоит задача отцентрировать вертикально только одну строчку текста, то все, что нужно сделать для ее выполнения – это задать высоту строки больше, чем размер самого шрифта. Распределение свободного пространства происходит равномерно сверху и снизу текста, за счет чего строка отцентрируется по вертикали.

HTML:
<div id="parent">
    <div id="child">Нужный текст</div>
</div>


CSS:
#child {
    line-height: 200px;
}


Как и у любого другого метода, у line-height есть плюсы и минусы. Плюс: метод можно использовать в любом браузере. Минус: используется только для одной строки.
В примере задано произвольное значение (200px). Можно использовать любое другое значение больше размера шрифта.

Выравнивание изображений по центру методом line-height

HTML:
<div id="parent">
    <img src="image.png" alt="" />
</div>


CSS:
#parent {
    line-height: 200px;
}
#parent img {
    vertical-align: middle;
}


Методы вертикального центрирования с помощью CSS. Метод таблиц CSS
Методы вертикального центрирования с помощью CSS. Метод абсолютного позиционирования и отрицательных полей
Методы вертикального центрирования с помощью CSS. Абсолютное позиционирование и растягивание


Выравнивание изображения по центру с помощью метода line-height осуществляется за счет задания значения свойства line-height больше высоты самого изображения.

Осуществите свою мечту - узнайте, как стать миллионером.
  • Тэги публикации
Добавить комментарий