Html центрирование блока div. Выравнивание с помощью "растягивания". Какой способ выбрать
В процессе верстки веб-страниц достаточно часто встречается задача центрирования блоков. Это может быть как вертикальное, так и горизонтальное центрирование.
Например, если сайт имеет фиксированную ширину, то рационально будет выровнять его по центру окна браузера, т.к. это упрощает чтение текста(особенно если монитор большой). Некоторые дизайны вообще предполагают расположение блока в центре окна браузера, т.е одновременно вертикальное и горизонтальное центрирование.
Для начала поговорим о горизонтальном центрировании. Наиболее популярный прием, это когда блок центрируется установкой размеров правого и левого margin в "auto" . Допустим, мы хотим отцентрировать блок с id ="container" шириной 860px. В таком случае в CSS файле нужно написать:
#container {
background-color:#EEE;
width:860px;
margin:0px auto;
}
Однако I.E. старых версий(5.0 например) не выровняет этот блок по центру. Конечно, такие древние браузеры уже никто не использует(из 1800 моих дневных посетителей - только 1), однако на всякий случай, лучше сделать, чтобы и там работало:)
Для этого, родительскому элементу, т.е тому, внутри которого мы центрируем наш блок(обычно родительским элементом является тег BODY), нужно задать параметр text-align:center . В таком случае блок выровняется по центру, однако и все его содержимое, также выровняется по центру, а нам этого не нужно. Поэтому, внутри этого блока ставим выравнивание по умолчанию - text-align:left .
body {text-align:center}
#container {
background-color:#EEE;
width:860px;
margin:0px auto;
text-align:left;
}
Существует также другой способ горизонтального выравнивания блока, основанный на . Как Вы наверное знаете, по умолчанию, любой блочный элемент прижимается к левому краю родительского элемента. Поэтому, чтобы выровнять его по центру нужно:
2. Сместить его вправо на 50% ширины окна браузера
3. Используя отрицательный отступ, сместить его влево на расстояние, равное половине ширины блока.
Таким образом, блок окажется по центру. Для большей наглядности, посмотрите ролик ниже:
CSS код примера:
#container {
background-color:#559964;
position:absolute;
left:50%;
margin-left:-430px;
width:860px;
}
Следует отметить, что если Вы хотите спозиционировать блок не относительно окна браузера, а, например, относительно другого блока, то для этого другого блока нужно задать position:relative;
Предположим, наш блок #container, который нужно выровнять по центру, лежит внутри блока #wrap. Тогда код будет выглядеть следующим образом:
#wrap{position:relative}
#container {
background-color:#559964;
position:absolute;
left:50%;
margin-left:-430px;
width:860px;
}
Теперь давайте рассмотрим случай, когда нужно выровнять блок по центру страницы, т.е. применить одновременно горизонтальное и вертикальное центрирование. Здесь опять же применим позиционирование. Итак нам нужно:
1. Задать блоку абсолютное позиционирование
2. Сместить его вправо на 50% и вниз на 50% , тем самым поставив его верхний левый угол в центр окна браузера.
3. Используя отрицательный отступ, сместить его вверх на расстояние, равное половине высоты блока, и влево на расстояние, равное половине ширины блока.
Таким образом, блок окажется в центре веб-страницы.
Допустим высота нашего блока 600px , ну а ширина 860 px . Тогда CSS код будет выглядеть следующим образом:
#container {
background-color:#559964;
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-430px;
height:600px;
width:860px;
}
Надеюсь сам принцип Вам понятен.
Комментарии:
Буду первым кто посмотрел урок!!!
Эх... Вторая =) Недавно встретилась с этой проблемой в IE, мучалась долго)) Спасибо =)
Спасибо, страница в закладках)))
Большое спасибо, Андрей, за новые уроки!
Просто спасибо,я думаю добавить тут не чего))
Спасибо за урок, буквально пару дней назад пытался таое сделать, немного помучился и временно отложил
А у меня проблема: сайт в Mozille Firefox не хочет выравниваться, прилип к левому краю и все, ничего из вышеперечисленного не помогает (то же и в Opera).
а почему это не работает? - "если Вы хотите спозиционировать блок не относительно окна браузера, а, например, относительно другого блока, о для этого другого блока нужно задать position:relative;"
Огромное спасибо!!просто ГИГАНТСКОЕ спасибо!Дай Бог Вам здоровья!
Всё отлично, но только почему то все изображения встают на места только после обновления браузера. Подскажите пожалуйста -почему так происходит?
Андрей, добавьте пожалуйста поиск по сайту.
Добавить комментарий.
Проблема вертикального центрирования элементов в CSS имеет ряд готовых решений. Выбор способа выравнивания в каждом отдельном случае зависит от типа, размеров, позиционирования элементов и других заданных им свойств.
Ниже представлены популярные у верстальщиков приемы выравнивания по вертикали. Показывается, как они работают, и для каких случаев наиболее подходит каждый из них.
Вот два элемента div:
Каждый из способов будет применен для выравнивания внутреннего блока по центру наружного.
line-height для одной строки
Когда родитель занимает одну строку текста и высота потомка известна, можно применить свойство line-height. Значение свойства должно быть равным высоте внешнего блока. Это работает только для одной строки, поэтому потомку полезно добавить overflow: hidden и запрет переноса строки white-space: nowrap.
Не получится воспользоваться процентной записью line-height=100%, потому что 100% в этом случае — высота шрифта.
Container {
height: 300px;
line-height: 300px;
}
Inner {
white-space: nowrap;
overflow: hidden;
}
Способ применим только при известной высоте внешнего блока.
Таблица с vertical-align
Для вертикального выравнивания элементов как нельзя лучше подходит таблица. Чтобы не нарушать семантику, табличные элементы лучше создавать средствами CSS. Положением содержимого ячейки управляет vertical-align. В таблицах работают четыре значения этого свойства:
Baseline — по умолчанию;
. bottom — содержимое внизу ячейки;
. middle — содержимое посередине ячейки;
. top — содержимое вверху ячейки.
В первом примере внешним блоком становится одинокая ячейка таблицы.
Container {
display: table-cell;
vertical-align: middle;
}
Способ хорош тем, что работает для элементов без заданной высоты, но в некоторых случаях его использованию мешает тот факт, что внешний блок, как любая ячейка таблицы, по ширине подстраивается под свое содержимое, а растянуть его можно только задав ширину для width явно. Для ячейки без таблицы проценты работают неадекватно.
Этот недостаток исправляется обертыванием ячейки в родителя со свойством display:table. Этому элементу размер можно задать в процентах. Окончательно код будет выглядеть так:
Outer-wrapper {
display: table;
}
Container {
display: table-cell;
vertical-align: middle;
}
Position: absolute + отрицательный margin
Способ применяется, когда известна высота внутреннего элемента. Для внешнего блока она может быть неизвестной. Родителю задается относительное позиционирование, а потомку внутри него абсолютное.
Значение свойства top, равное 50%, заставляет вложенный элемент расположиться верхним краем посередине внешнего блока. Остается поднять его отрицательным margin-top на половину собственной высоты, чтобы он встал точно по центру вертикали.
Container {
position: relative;
}
Inner {
height: 140px;
position: absolute;
top: 50%;
margin-top: -70px;
}
Недостаток этого способа в необходимости знать высоту потомка.
Выравнивание в строке с vertical-align
Выравнивание строчных и строчно-блочных элементов, включая изображения и иконки, в окружающем их тексте осуществляется свойством vertical-align. В отличие от таблицы, в этом случае работает весь набор его значений, указанных в спецификации.
При известной высоте родителя этим свойством можно воспользоваться для центрирования многострочного текста.
Для внешнего блока прописывается центрирование одной строки.
Container {
height: 140px;
line-height: 140px;
}
Значение line-height для внутреннего блока переопределяется на normal или на любую требуемую величину. Ему же задается выравнивание vertical-align: middle и преобразование в строчно-блочный тип — display: inline-block.
Inner {
display: inline-block;
line-height: normal;
vertical-align: middle;
}
Недостаток способа — надо знать высоту родителя.
Выравнивание с помощью transform
Функция translateY свойства transform позволяет отцентрировать внутренний блок с неизвестной высотой. Для этого родитель должен быть спозиционирован относительно, а потомок — абсолютно.
Свойство top со значением 50% опускает внутренний блок так, что его верхний край располагается посередине родителя. Значение translateY: -50%, поднимает элемент на половину его собственной высоты и тем самым совмещает вертикальные центры блоков.
Container {
position: relative;
}
Inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Недостаток приема в ограниченной поддержке функций transform браузером IE.
Выравнивание через псевдоэлемент
Способ работает, когда высота неизвестна ни для первого, ни для второго блока. Внутрь родителя с помощью before или after добавляется строчный псевдоэлемент inline-block. Высота добавленного элемента должна равняться высоте родителя — height: 100%. Вертикальное выравнивание содержимого задается посредством vertical-align: middle.
С помощью vertical-align: middle относительно этого псевдоэлемента выравнивается внутренний блок. Так как родитель и потомок имеют одинаковую высоту, внутренний элемент, выравниваясь по вертикали с псевдоэлементом, центрируется также и с внешним блоком.
Container:before {
content: "";
height: 100%;
vertical-align: middle;
display: inline-block;
}
Inner {
display: inline-block;
vertical-align: middle;
}
Универсальный способ. Не работает если внутреннему блоку задано абсолютное позиционирование.
Flexbox
Самый новый и простой способ выравнивания элементов по вертикали. Flexbox позволяет расставлять элементы Web-страницы как угодно. Чтобы выровнять блок по центру, достаточно родителю прописать display: flex, а потомку margin: auto.
Container {
display: flex;
width: 320px;
height: 140px;
}
Inner {
width: 120px;
margin: auto;
}
Flexbox работает только в современных браузерах.
Выбор способа
Какой техникой вертикального выравнивания воспользоваться зависит от задачи и тех, ограничений, которые могут присутствовать в каком конкретном случае.
Высота элементов неизвестна
В этой ситуации можно воспользоваться одним из четырех универсальных способов:
1. Таблица. Родителем становится ячейка таблицы, созданная в HTML или через display-table/display-cell. Этому элементу-родителю присваивается vertical-align: middle.
2. Псевдоэлемент. Для внешнего блока создается строчно-блочный псевдоэлемент с width=100% и vertical-align: middle. Потомку прописываются display: inline-block и vertical-align: middle. Способ не работает только когда внутреннему блоку задано абсолютное позиционирование.
3. Transform. Родитель получает position: relative. Потомку присваивается position: absolute, top: 50% и transform: translateY(-50%);
4. Flexbox. Внешнему блоку ставится display: flex, внутреннему — margin: auto.
Известна только высота потомка
Внешний блок позиционируется относительно; внутреннему элементу прописываются абсолютное позиционирование, top: 50% и margin-top, равный половине его высоты.
Одна строка в блоке с известной высотой
Внешнему блоку задается свойство line-height со значением, равным его высоте.
Высота внешнего блока известна, а внутреннего элемента - нет.
Родителю ставится line-height равный его высоте. У потомка значение line-height переопределяется на normal или на любую требуемую величину, и задаются ему display: inline-block и vertical-align: middle.
Выравнивание различных элементов, как на сайте или странице изначально идет для кого то сложной задачей, что качается выравнивание текста по вертикали. Как ни странно, одним из наиболее сложных способов использования CSS является центрирование контента. Центрирование контента по горизонтали относительно легко в некоторые моменты времени. Центрирование содержимого по вертикали затруднено почти всегда. Центрирование различного элемента, что нужно выставить по вертикале при помощи CSS. Это безусловно очень часто задаваемый вопрос, который создает проблемы дизайнеров и веб мастерам. Тем не менее существует множество методов для выполнения центрирование по вертикале, и каждый из них довольно прост в использовании.Если вы когда-либо пробовали, то это сложно, особенно если вы хотите избежать использования таблиц. К счастью, наши крики о помощи были услышаны, и одно из новых вооружений, добавленных в арсенал CSS для решения этой проблемы, это тип макета, известный как гибкий макет коробки. Как вы узнаете через несколько мгновений, которые предоставляет вам некоторые действительно отличные функции, чтобы упростить сложные макеты. Часть этой отличной функциональности также позволяет вам центрировать ваш контент вертикально и горизонтально, и вот что мы рассмотрим в этом уроке. Вы можете сделать это с дополнением до некоторой степени, но это может вывести ваш макет на более мелкие экраны. Добавление пользовательского класса CSS в таблицу стилей означает, что вы можете вертикально центрировать любой контент за считанные секунды.
Горизонтальное выравнивание определяет, как левый и правый края абзаца совпадают между левым и правым краями текстового поля. Вертикальное выравнивание определяет размещение знака в текстовом поле по вертикали. Отсутствие хороших способов вертикального центрирования элементов в CSS было темным недостатком его репутации в значительной степени для всего ее существования.
Первый метод с line-height
Первый способ идет простой и в чем то банален, где есть свои недостатки что будет идти ограничение в применении. При кодировании html страниц для сайта междустрочный интервал текстового содержимого, вероятно, является одним из атрибутов, который обычно остается по умолчанию. Вообще нам нужно задать высоту самой строки, которая идет с аналогичной высотой для блока, где используется line-height свойство.
Это первый метод, что показан на демонстраций
CSS
Constutesim_first {
border: 2px solid #bf1515;
height: 175px;
}
.constutesim_first > p{
line-height:175px;
margin:0;
text-align:center;
padding: 0;
font-size: 17px;
color: #3152a0;
font-family: Tahoma;
font-weight: bold;
}
Также вы можете сразу посмотреть, как все в реальности будет выглядеть.
Аналогичным методом, есть возможность реализовать, как выставить изображение, что будет по центру и безусловно по вертикали. Здесь остается только прописать одно свойство vertical-align: middle; которое отвечает за вывод картинки.
CSS
Second-variation{
border: 2px solid red;
line-height:158px;
}
Second-variation div{
text-align:center;
}
.second-variation img {
vertical-align: middle;
border: 0px solid #3a3838;
}
Реализуем снимки изображений по центру и вертикали.
Выравнивание со свойством position
Это вероятно самый известный метод, но больше всего распространенный по применению к использованию с помощью CSS. Но здесь нужно добавить, что он также не идеален и у этого метода, также есть свои небольшие нюансы, которые связаны с центром элемента, что если будет задаваться в процентном соотношение, то станет центрирование по левую сторону верхней стороны, внутр самого блога.
CSS
Competaird-option {
border: 2px solid #d40e0e;
height: 162px;
position: relative;
}
.competaird-option div {
position: absolute;
top: 50%;
left: 50%;
height: 28%;
width: 49%;
margin: -2% 0 0 -25%;
border: 2px solid #4a4848;
}
Интервалы между строками или линией высотой является вертикальной высотой между строками текста в тонированном HTML странице. Почти всегда это значение расстояния устанавливается соответствующим значением браузером или механизмом рендеринга. Это значение обычно зависит от шрифта отображаемой страницы и других факторов.
Выравнивание со свойством table
В этом методе задействуем проверенную и старую методу, где переделаем элементы в таблицу в которой находятся ячейки. Что по тегу, под названием table, то здесь он не будет задействован, здесь будем задавать совершенно другие свойство CSS, это display: table;, display: table-cell;. Если говорить про самые старые версий IE, то данные здесь просто выводить не будет. Надеюсь вы свой браузер обновили, так как он становится не актуален и почти все не корректно выводит.
Cherevert-variation {
border: 2px solid #c30b0b;
height: 173px;
display: table;
width: 100%;
font-size: 17px;
font-weight: bold;
color: #3945a0;
}
Cherevert-variation div{
display: table-cell;
vertical-align: middle;
text-align:center;
}
Прежде всего, давайте посмотрим, что используется по умолчанию, которое используется большинством браузеров. В большинстве современных дневных браузеров интервал между линиями.
Выравнивание со свойством flex
Здесь мы подходим, к более оригинальному варианту, у которого имеются свои свойства, что можно редко встретить верстки интернет ресурса. Но все же они применяются, что в каких то случаях они полезны. Это устанавливает основную ось, таким образом, определение элементов гибкости направления помещается в контейнер гибких дисков.
CSS
Variant-horizontal {
border: 2px solid #d20c0c;
height: 147px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: #49518c;
}
Вы можете указать значение для строки-высоты так же, как вы указали бы любой другой размер в css, либо как число, размер пикселя, либо как процент.
Выравнивание со свойством transform
И вот подошли в самому крайнему методу, но не к самому последнему по применению в использование его веб дизайне. Здесь все просто, нужно сдвинуть по вертикали заданный элемент на то значение, которое вам нужно. Свойство transform , это список преобразований, которые установщик применяет при установке пакета. Установщик применяет преобразования в том же порядке, в каком они указаны в свойстве.
CSS
Vertical-medilpasudsa {
border: 2px solid #e00a0a;
height: 158px;
font-size: 19px;
font-weight: bold;
color: #353c71;
}
.vertical-medilpasudsa > div{
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
}
Когда вы укажете значения в виде числа, он будет основываться на текущем размере шрифта в качестве базы. Текущий размер шрифта умножается на число, которое вы указываете для вычисления высоты линии или пробела между строками.
Если вы хотите центрировать знаки по горизонтали в элементе, вы должны использовать text-align: center. Один из вариантов, если вы хотите центрировать его по вертикали, и у вас есть фиксированный верхний нижний колонтитул и один ряд текста, установите, что высота линии будет такой же, как высота вашего нижнего колонтитула.
Если вам нужно центрировать текст внутри элемента, такого как div, header или paragraph, вы можете использовать свойство text-align CSS.
Text-align имеет несколько допустимых свойств:
Center:
Текстура центрирована;
left:
Будет выравниваться с левой стороны контейнера;
right:
Выровнен с правой стороны контейнера
justify:
Вынужден ровняться, как с левой, так и с правого края контейнера, за исключением крайних строк;
justify-all:
Заставляет крайнее строку оправдывать знаки;
start:
То же самое, что по левую, только если направление идет с лева на правую сторону. Но правильно будет, если изначально задать направление текстового направление, что произойдет справа налево;
End:
Противоположность начала;
match-parent:
Аналогично наследованию, кроме начала и конца, вычисляется относительно родительского элемента;
Используйте эти свойства для выравнивания текста внутри родительского или оберточного div. Если вы хотите центрировать текст по горизонтали в элементе, вы должны использовать text-align: center.
Один из вариантов, если вы хотите центрировать его по вертикали, если у вас есть фиксированный верхний нижний колонтитул и один ряд текста, установите, что высота линии будет такой же, как высота вашего нижнего колонтитула.
Сегодняшняя статья направлена на то, чтобы показать, как при помощи нескольких CSS-трюков выровнять div по центру, как по горизонтали, так и по вертикали. Также мы расскажем, как произвести центрирование по всей странице либо в отдельно взятом div-элементе .
Простое центрирование DIV-элемента на странице
Этот метод будет отлично работать во всех браузерах.
CSS
Center-div { margin: 0 auto; width: 100px; }
Пример
Значение auto в свойстве margin устанавливает левый и правый отступ на все пространство, доступное на странице. Здесь важно запомнить, что у центрируемого div-элемента обязательно должно быть установлено значение width .
Центрируем DIV внутри DIV-элемента старым способом
Этот метод div выравнивания по центру будет работать во всех браузерах.
CSS
Outer-div { padding: 30px; } .inner-div { margin: 0 auto; width: 100px; }
HTML
Пример
Внешний div может быть помещен как угодно, но у внутреннего блока div обязательно должна быть указана ширина (width ).
Центрируем DIV внутри DIV-элемента с помощью inline-block
В этом методе центрирования div внутри div необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8 .
CSS
Outer-div { padding: 30px; text-align: center; } .inner-div { display: inline-block; padding: 50px; }
HTML
Пример
Свойство text-align работает только в inline-элементах . Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента , а также в качестве блока (inline-block ). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div .
Центрируем DIV внутри DIV-элемента горизонтально и вертикально
Здесь для центрирования div по центру страницы используется margin: auto . Пример будет работать во всех современных браузерах.
CSS
Outer-div { padding: 30px; } .inner-div { margin: auto; width: 100px; height: 100px; }
HTML
Пример
У внутреннего div-элемента должна быть указана ширина (width ) и высота (height ). Метод не сработает, если у внешнего div-элемента будет фиксированная высота.
Центрируем DIV по нижней границе страницы
Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.
CSS
Outer-div { position: absolute; bottom: 30px; width: 100%; } .inner-div { margin: 0 auto; width: 100px; height: 100px; background-color: #ccc; }
HTML
Пример
У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div . Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top .
Центрируем DIV на странице вертикально и горизонтально
Здесь, чтобы выровнять div по центру, снова используется margin: auto и абсолютное позиционирование внешнего div . Метод будет работать во всех современных браузерах.
CSS
Center-div { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; }
Пример
У div-элемента должна быть установлена ширина (width ) и высота (height ).
Делаем адаптивное центрирование DIV-элемента на странице
Здесь для выравнивания div по центру средствами CSS мы делаем ширину div-элемента адаптивной, чтобы она реагировала на изменения размеров окна. Этот метод работает во всех браузерах.
CSS
Center-div { margin: 0 auto; max-width: 700px; }
Пример
У центрированного div-элемента должно быть установлено свойство max-width .
Центрируем DIV внутри элемента с помощью свойств внутреннего блока
Внутренний div-элемент здесь адаптивен. Этот метод расположения div внутри div по центру будет работать во всех браузерах.
CSS
Outer-div { padding: 30px; } .inner-div { margin: 0 auto; max-width: 700px; }
HTML
Пример
У внутреннего div должно быть установлено свойство max-width .
Центрируем два адаптивных div-элемента рядом друг с другом
Здесь у нас два расположенных рядом адаптивных div-элемента. Этот метод установки div по центру экрана будет работать во всех современных браузерах.
CSS
Container { text-align: center; } .left-div { display: inline-block; max-width: 300px; vertical-align: top; } .right-div { display: inline-block; max-width: 150px; } screen and (max-width: 600px) { .left-div, .right-div { lef max-width: 100%; } }
HTML
Пример
Здесь у нас несколько элементов с примененным свойством inline-block , расположенных внутри центрированного контейнера. В этом примере также используются медиа-запросы CSS ; то есть, если размер экрана меньше 600 пикселей, то свойство max-width как для левого, так и для правого div-элемента устанавливается на 100%.
DIV-элемент, центрированный при помощи Flexbox
Здесь мы располагаем CSS div по центру с помощью Flexbox . Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+ , IE11 , Microsoft Edge , Firefox 38+ , Safari 9+ , Opera 30+ , iOS Safari 9+ , а также Android Browser 40+ .
CSS
Container { display: flex; align-items: center; justify-content: center; height: 100vh; } .item { background-color: #f3f2ef; border-radius: 3px; width: 200px; height: 100px; }
Выравнивание элементов на веб-странице может оказаться не такой легкой задачей, особенно если речь идет об выравнивание текста по вертикали. Этот вопрос часто встречается на форумах, и особую трудность решение этого вопроса вызывает у начинающих пользователей. Но на самом деле здесь сложного ничего нет. Все что нужно, это немного владеть знаниями каскадной таблицы стилей CSS. Так как это все делается за счет ее правил.
Выравнивание текста по вертикали можно добиться по меньшей мере пятью разными способами. Каждый из них по-своему хорош, учитывая обстоятельства и детали ситуации. Мы рассмотрим несколько примеров, а вы исходя из условий, подберете себе подходящее ращение.
Первый метод с line-height
Первый способ очень банальный и с большим недостатком, что ограничивает его в применении. Но все же, как ни крути, он может пригодиться и даже принести нужный результат. Это будет условным выравниванием, так как, по сути, мы задаем высоту строки в соответствии с высотой блока, использовав свойство line-height .
первый пример. демо №1
первый пример. демо №1
/* №1 */ .talign1{ border: 1px solid red; height:200px;/* высота блока */ } .talign1 > p{ line-height:200px;/* устанавливаем высоту строки в соответствии с высотой блока */ margin:0;/* убираем внешние отступы, если они есть */ text-align:center;/* выравниваем текст по центре по горизонтали */ padding: 0;/* убираем внутренние отступы, если они есть */ } /* end №1*/
Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .
Пример. Демо №2
Пример. Демо №2/* №2 */ .talign2{ border: 1px solid red; line-height:200px;/* высота строки блока */ } .talign2 div{ text-align:center;/* выравниваем элементов по центре по горизонтали */ } .talign2 img{ vertical-align:middle;/* выравниваем картинки по центре по вертикали */ border: 1px solid black; } /* end №2*/
Выравнивание со свойством position
Этот метод широко используется во многих задачах CSS, не исключая и нашей поставленной задачки. Но следует отметить, что он не полностью совершенен и имеет свои побочные эффекты. Это связано с тем, что центрирование элемента, задаваемое в процентах, будет центрироваться по левому верхнему краю внутреннего блока.
Поэтому нужно задать отрицательное значение к внешним отступам. Размер отступа сверху должен соответствовать половине высоты внутреннего блока, а отступ слева — на половину ширины. Таким образом, получим абсолютный центр.
В этом варианте, пожалуй, обязательно знать точную высоту и ширину дочернего элемента. Иначе, может возникнуть некорректность центрирования.
/* №3 */ .talign3{ border: 1px solid red; height:200px;/* высота блока */ position: relative; } .talign3 div{ position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -5% 0 0 -25%; border: 1px solid black; } /* end №3*/
Выравнивание со свойством table
Здесь используем старую технику, превратив элементы в таблицу с ячейками. При этом теги таблицы
