Как выровнять div по центру css

Выровнять текст по центру (по вертикали) у div с display: inline-block

Выровнять текст по центру (по вертикали) у div с display: inline-block . При использовании vertical-align меняется положение самого блока. Возможно ли это сделать без обертывания текста в

?

Отслеживать
задан 29 дек 2017 в 20:08
user272575 user272575

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

div < width: 100px; height: 100px; padding: 5px; display: inline-block; vertical-align: top; border: 1px solid #f00; text-align: center; >div:after

text

Отслеживать
ответ дан 29 дек 2017 в 20:27
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков

Мой любимый костыль, сам пользуюсь

 .div-table < display: table; width: 100%; height: 100%; >.div-table-cell 

В любой нужный элемент вписывается div-table, в него div-table-cell, и вот в него уже всё, что нужно разместить по центру по вертикали

 
 
 
. что угодно, не только текст
 
 

Отслеживать
ответ дан 29 дек 2017 в 20:20
71 1 1 серебряный знак 6 6 бронзовых знаков
Не самый лучший вариант тк тут меняется тип элемента.
– user272575
29 дек 2017 в 20:55

Оно применяется только к строчным элементам inline или строчным блокам inline-block. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.

«Div» по центру, выравнивание div

Всем отличного настроения, ну вот у меня с настроением не очень. т.к не получается разместить div по центру. Нашел в инете несколько способов как это сделать. на примере все работает, но вот для моего случая ни в какую не хочет.
Не могу понять что не так.

  
Text
 
 
Text
 
 
 
Text
 
 
 
Text
 
  

#middle .leftCol < width:700px; padding-left:20px; position:relative; border:1px solid #000; >#middle .leftCol .centrirov .active < width:144px; height:110px; background:url(/i/buttonActive.png) no-repeat; /*margin-top:-6px;*/ color:#fff; cursor:pointer; display:table-cell; vertical-align:middle >.enabled < cursor:pointer; >#middle .leftCol .centrirov .active .text < color:#fff; >#middle .leftCol .centrirov .text < background:none; display: inline-block; vertical-align: middle; >#middle .leftCol .centrirov < background:url(/i/button.png) no-repeat; width:129px; height:100px; float:left; margin-right:28px; text-decoration:none; color:#bebcbc; font-size:20px; text-align:center; display: table-cell; vertical-align: middle; >

Отслеживать
задан 1 фев 2012 в 11:16
163 2 2 золотых знака 5 5 серебряных знаков 23 23 бронзовых знака
При чём тут эти стили? Какие блоки нужно отцентрировать?
1 фев 2012 в 11:34
9 фев 2012 в 18:09

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Такой громоздкий код, для такого примера. Не хочу разьиратся что и где нужно выровнять. В общим вот: для выравнивания дива с фиксированной шириной

div.center

Отслеживать
ответ дан 1 фев 2012 в 12:20
Alex Kapustin Alex Kapustin
11.7k 1 1 золотой знак 19 19 серебряных знаков 22 22 бронзовых знака

нужно выравнять по центру leftCol div
2 фев 2012 в 4:24
а самостоятельно из приведенного ответа не извлечете решение? =\
2 фев 2012 в 4:34

#middle .leftCol .centrirov

Эти свойства не сочетаются!

Решение:
Из стиля для #middle .leftCol .centrirov нужно убрать

display: table-cell; vertical-align: middle; 

Каждый div.text обернуть ещё в один div и задать этому div ‘ву стиль

#middle .leftCol .centrirov > div

PS:
Кто не понял, челу нужно было вертикальное выравнивание div.text .

Как выровнять блок (div) по центру — все популярные способы выравнивания

Подробное руководство по центрированию элементов на странице.

В этой статье рассмотрим, как отцентрировать блок по горизонтальной и вертикальной оси.

Горизонтальное центрирование

Первый способ

Первый вариант самый просто — просто добавьте вашему блоку свойство text-align: center;

.myblock

⚠️ Недостаток этого метода в том, что теперь весь контент внутри этого блока будет центрироваться по центру:

Таким образом данный способ подойдет для конкретной строки (например для h2,h3 и тд). Но для центрирования блока это плохой вариант.

Второй способ

Тоже достаточно простой способ. Используем display: flex;

К примеру, хотим выровнять один блок (заголовок h1):

 
 
Заголовок
 
 

.myblock

⚠️ Важно, если вы хотите добавить несколько блоков внутри элемента с классом .myblock, то нужно немного изменить css.

 
Заголовок
 
Небольшой текст
 
 

Здесь мы добавили блок с классом width-1-2, чтобы продемонстрировать, как работает центрирование для блоков с заданной шириной.

.myblock < display: flex; flex-direction: column; align-items: center; justify-content: center; >.width-1-2

Нам пришлось добавить в css свойство flex-direction: column, чтобы сменить основную ось (была горизонтальная, стала вертикальная) и разместить блоки друг над другом. И раз мы сменили ось, то теперь нам нужно использовать align-items:center, чтобы разместить блок по центру.

Как видите, блоки размещены по центру, при этом, в отличие от text-align: center; текст внутри div не центрирован.

Как разместить картинку по центру блока, вы можете узнать в этой статье.

Вертикальное центрирование

Здесь все немного интереснее, но все так же при этом просто и понятно.

Выравнивание div блока по центру

при нажатии определенных кнопок на странице — этот блок появляется, т.е. он уже не display: none; но т.к. у всех мониторы разные — блок имеет разную ширину. Как его можно выровнять по центру? пробовал прописывать так, но не сработало:

.window

Отслеживать
задан 8 ноя 2012 в 13:06
646 3 3 золотых знака 28 28 серебряных знаков 50 50 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если размеры блока заданы процентами:

.window

Отслеживать
ответ дан 8 ноя 2012 в 13:22
ReklatsMasters ReklatsMasters
2,394 18 18 серебряных знаков 32 32 бронзовых знака

.centered

Марджины должны быть на половину меньше высоты и ширины блока. top и left всегда должен быть 50%. Этот способ описан здесь. Если ширина и высота блока неизвестна, то можно сделать так:

$(document).ready(function(e) < var win = $('.window'); win.css(< 'margin-top':'-' + (win.height() / 2) + 'px', 'margin-left':'-' + (win.width() / 2) + 'px' >); >); 

Кстати. Не заметил, что ширина в процентах у вас. Если так то можно margin тоже задавать в процентах и тогда этот скрипт не понадобится.