Как отцентрировать контент в блоке по вертикалиОпубликовано: 06.02.2013 01:47 Автор: Ogri Просмотров: 6317
На первый взгляд может показаться, что решение вынесенной в заголовок задачи тривиально: устанавливаем CSS-атрибут vertical-align:middle
- и все дела. Но не так все просто. Принцип компоновки элементов традиционно основан на масштабировании по ширине, в высоту же содержимое растягивается или сжимается в соответствии с шириной. vertical-align
удобно использовать в таблицах для центрирования содержимого ячеек, равно как и в блоках DIV с атрибутом display:table-cell
. Ожидаемого поведения при вертикальном центрировании контента можно также достичь для элементов нормального потока страницы - блоков с атрибутом display:inline-block
. Во всех же прочих случаях этот подход неприменим, поскольку большинство современных браузеров просто использует значение атрибута vertical-align
для наследования дочерними inline-элементами блока. Здесь потребуется другая методика, описанию которой и посвящена эта статья.
Сразу оговорюсь: использование этой техники подразумевает два предположения:
- Вы можете определить фиксированную высоту внутреннего блока.
- Можно присвоить внутреннему блоку абсолютное позиционирование. Как правило, это не проблема, поскольку контейнер может оставаться в общем потоке.
Если эти условия соблюдены, делаем следующее:
- В стиле контейнера определяем атрибут
position
какrelative
илиabsolute
. - Задаем фиксированную высоту дочернего блока.
- Устанавливаем в стиле дочернего блока
position:absolute
иtop:50%
, совместив тем самым его верхнюю границу с серединой родительского блока. - Присваиваем атрибуту
margin-top
дочернего блока значение, равное половине его высоты, что сдвинет дочерний блок вверх до совпадения его середины с серединой контейнера.
Пример:
<div style="position: relative;">
Контейнер
<div style="position:absolute; top:50%; height:8em; margin-top:-4em;">
Отцентрированный по вертикали дочерний блок
</div>
</div>
Вот как это выглядит в браузере:
Пример практического использования данного метода при вписывании имиджа в контейнер вы можете найти в следующей статье.
Новые
-
20.07.2020 00:53
Joomla 3: Перенаправление на ту же страницу после авторизации -
13.02.2017 14:09
Joomla: как добавить свои языковые константы или переопределить существующие -
13.02.2017 13:23
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments -
23.06.2016 10:48
Единая фильтрация вывода модуля mod_jcomments_latest -
13.09.2015 13:06
Постим иллюстрированные статьи Joomla-сайта на Facebook, используя OG-теги
Популярные
-
58703
Редактирование анимированных GIF-имиджей в Photoshop CS3 -
33500
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments -
31141
Единая фильтрация вывода модуля mod_jcomments_latest -
30142
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments -
25497
Кнопки социальных сетей в Joomla 2.5
Авторизация
Гитара
Гостевая колонка
Последние комментарии
-
Joomla 3: Перенаправление на ту же страницу после авторизации
-
nt 31.12.2021 17:12
-
https://yarabook.Com 28.12.2021 10:04
Have you ever considered writing an e-book or guest authoring on other blogs? I have a blog based ...
-
-
Joomla: Интегрируем reCAPTCHA v2 (NO CAPTCHA) в JComments
-
https://ameblo.jp 26.03.2022 03:58
Awesome blog! Is your theme custom made or did you download it from somewhere? A theme like yours ...
-
ameblo.jp 02.03.2022 04:43
Hello to every single one, it's in fact a leasant for me to pay a visit this web page, it consists ...
-
mm 24.12.2021 22:41
Unquestionably imagine that that you said. Your favourite justification appeared to be on the internet ...
-
-
Joomla: Фильтруем контент по материалам, категориям и компонентам
-
Bailey 31.12.2021 01:59
If you desire to obtain a good deal from this post then you have to apply such strategies to your won ...
-
-
Кнопки социальных сетей в Joomla 2.5. Варианты от Яндекса и Pluso
-
flyff 21.04.2022 22:07
Thanks for finally talking about >Кнопки социальных сетей в Joomla 2.5. Варианты от Яндекса и Pluso
-
-
Миграция с Joomla 1.5 на Joomla 2.5. Ч.2-1. Перенос jDownloads и jComments
-
home page 30.04.2022 12:56
Link exchange is nothing else but it is just placing the other person's website link on your page at ...
-
ql 31.12.2021 17:02
I like the helpful info you provide in your articles. I will bookmark your weblog and check again ...
-
Oscar 25.12.2021 15:18
Heya this is kinda of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have ...
-
Подробнее...