HTML і CSS - революція в світі web-дизайну!
- управління відображенням безлічі документів за допомогою каскадних таблиць стилів
- Більш точний контроль над зовнішнім виглядом web-документів
- Різні уявлення для різних носіїв інформації
- Складна і пророблена техніка дизайну
Головна / HTML і CSS рецепти / Вертикальне вирівнювання елемента всередині блоку
Вирівнювання за допомогою css властивості table і expression для ІЕ 7. Припустимо, що у нас стоїть завдання вирівняти абзац з текстом по вертикалі щодо елемента із заздалегідь відомими розмірами.
Спочатку створимо html розмітку:
До блоку з класом conteiner_wrap і абзацу з текстом застосуємо наступні стилі:
Якщо потрібно, що б блоків було кілька і вони шикувалися один за одним, слід основним контейнеру conteiner_wrap додати css властивість float: left ;. Для наочності в прикладі нижче виводяться три блоки з текстом.
Приклад того, що повинно вийти:
Абзац тексту, який потрібно вирівняти по вертикалі щодо першого сірого блоку.
Абзац тексту, який потрібно вирівняти по вертикалі щодо другого сірого блоку.
Абзац тексту, який потрібно вирівняти по вертикалі щодо третього сірого блоку.
Істотним недоліком даного способу є відсутність підтримки в IE 7. На щастя, за допомогою невеликих "танців з бубном" цей браузер покаже те, що задумано.
Що б непокірний "ослик» не вередував додамо пару стильових правил до абзацу з текстом:
Якщо властивість expression з якихось причин застосувати не можна, то можна обійтися і без його використання.