Css не работает vertical align: html — Не работает vertical-align

Leave a Comment / Css / By alexxlab / 10.09.2023

Содержание

html — Не работает vertical-align

Вопрос задан 6 лет 9 месяцев назад

Изменён 4 года 1 месяц назад

Просмотрен 8k раз

Есть родительский div (зеленый на примере-рисунке) и есть два независимых div-блока с текстом и прочими элементами внутри (красный на рисунке).

В левом мало текста, а во втором — много.

Требуется, чтобы элементы слева всегда были посередине относительно элементов справа, как на рисунке этом:

_{(источник: joxi.ru)}

Я знаю, что для этого ворде как нужно использовать vertical-align: middle, но результат не тот, что нужен. Получается идентично как если бы я bottom написал.

html
css
html5
css3

Вариант 1 display: inline-block;:

* {
  box-sizing: border-box;
}

. row {
  border: 2px solid green;
  padding: 5px;
}

.col {
  border: 2px solid tomato;
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

.col+.col {
  margin-left: -5px;
}

<div>
  <div>
    Lorem ipsum.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, voluptas.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, voluptas.
  </div>
</div>

Вариант 2 display: table-cell;:

* {
  box-sizing: border-box;
}

.row {
  border: 2px solid green;
  padding: 5px;
  display: table;
}

.col {
  border: 2px solid tomato;
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}

<div>
  <div>
    Lorem ipsum.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Suscipit, voluptas.
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, voluptas.
  </div>
</div>

Вариант 3 display: flex;:

* {
  box-sizing: border-box;
}

.row {
  border: 2px solid green;
  padding: 5px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-flow: row nowrap;
}

.col {
  border: 2px solid tomato;
  width: 50%;
}

<div>
  <div>
    Lorem ipsum.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, voluptas.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, voluptas.
  </div>
</div>

Вы не очень правильно понимаете как работает и главное как не работает vertical-align. Чтобы добиться нужного вам результата потребуется для дочерних div задать display: table-cell; (и убрать float)

Ссылка по теме: Разбираемся с vertical-align

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Не работает vertical-align: middle;

Задать вопрос

Вопрос задан 7 лет 11 месяцев назад

Изменён 7 лет 11 месяцев назад

Просмотрен 8k раз

Вот смотрите, простой казалось бы код, но почему не работает vertical-align: middle;?

.mainHistory{
  width: 1100px;
  margin: 100px 0 0 0;
  position: relative;
  display: block;
}
.cellHistory{
     float: left; 
  width: 33%;
  text-align: center;
}
.cellHistory span{
        display: inline-block;
  vertical-align: middle;
}
  <div>
  <div>
    <span>01 01 2000</span> 
  </div>
  <div>
    <span>Создание фирмы
    Первоначальное название: ооо фирма </span>
  </div>  
  <div>
    <img src="/1. png">
  </div>
  </div>

html
css

Необходимо так

.mainHistory {
    width: 1100px;
    margin: 100px 0 0 0;
    position: relative;
    display: block;
    font-size: 0; <! -- убираем отступы  display: inline-block -->       
}
.cellHistory {
    display: inline-block;
    vertical-align: middle;
    width: 33.33333333333333%;
    text-align: center;
    font-size: 14px;
}
.cellHistory span {}

<div>
  <div>
    <span>01 01 2000</span> 
  </div>
  <div>
    <span>Создание фирмы Первоначальное название: ооо фирма</span>
  </div>
  <div>
    <img src="http://placehold.it/150x250" alt="" />
  </div>

Fiddle

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Почему свойство CSS с вертикальным выравниванием не работает и не помещает диапазон в среднюю высоту своего родителя?

Я с трудом понимаю свойство vertical-align в течение некоторого времени, и мне не удалось успешно его применить, поэтому я решил написать здесь.

С простой разметкой

 
  Часть текста по центру здесь

 .родительский{
  высота: 100 пикселей;
  цвет фона: красный;
  .текст{
    вертикальное выравнивание: посередине;
    цвет фона: зеленый;
  }
}

приводит к

, почему диапазон не центрирован в родительском контейнере? К чему именно относится это свойство?

Кодовое перо для вас:

Имейте в виду, что Я не спрашиваю здесь, как центрировать элемент в div , но почему это конкретное свойство css не работать так, как подсказывает мне здравый смысл.

Здесь начинает действовать вертикальное выравнивание https://codepen.io/anon/pen/QxZpYP

HTML
CSS

Если вы хотите использовать вертикальное выравнивание: средний , его необходимо объединить с отображением : таблица-ячейка и применить для родительского , и я бы не рекомендовал это решение, однако ниже приведен ваш код, исправлено и некоторые другие решения.

Решение 1

 .родительский{
  высота: 100 пикселей;
  отображение: таблица-ячейка;
  вертикальное выравнивание: посередине;
  цвет фона: красный
}
.текст{
  цвет фона: зеленый;
}

 <дел>
  Часть текста здесь по центру

Решение 2

Использование определенного line-height для .parent и vertical-align для дочернего элемента. В этом решении дочерний элемент выравнивается по вертикали относительно line-height , который растянут — он имеет 100 пикселей.

 .родитель {
  высота: 100 пикселей;
  цвет фона: красный;
  высота строки: 100 пикселей;
}
.текст {
  вертикальное выравнивание: посередине;
  высота строки: нормальная;
  цвет фона: зеленый;
}

 <дел>
  Часть текста здесь по центру

Решение 3

Я бы рекомендовал использовать display: flex , потому что использование display: table-cell вне таблиц вообще не рекомендуется. align-items: center выравнивает содержимое по вертикали, а justify-content: center выравнивает содержимое по горизонтали.

 .родительский{
  высота: 100 пикселей;
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
  цвет фона: красный
}
.текст{
  цвет фона: зеленый;
}

 <дел>
  Часть текста здесь по центру

Выравнивание по вертикали не работает с элементами div, обычно используется отображение : табличная ячейка в контейнере:

 . parent{
  высота: 100 пикселей;
  цвет фона: красный;
  отображение: таблица-ячейка;
  вертикальное выравнивание: посередине;
  .текст{
    цвет фона: зеленый;
  }
}

Или, используя CSS3 Flexbox , вы можете использовать это:

 .родительский {
  высота: 100 пикселей;
  цвет фона: красный;
  дисплей: гибкий;
  выравнивание элементов: по центру;
  .текст{
    цвет фона: зеленый;
  }
}

Если мы проверим документацию, мы прочитаем это:

Свойство вертикального выравнивания можно использовать в двух контекстах:
Для вертикального выравнивания блока встроенного элемента внутри его содержащей строки коробка . Например, его можно использовать для вертикального позиционирования в строка текста:

Но что такое строка ?

Вы можете обратиться к этой части спецификации, чтобы лучше понять линейные блоки. Это может быть сложно в начале, но для простоты высота линейного блока определяется встроенным элементом.

В вашем случае у вас есть только один встроенный элемент , который определяет поле строки, и его высота равна высоте поля строки, поэтому выравнивать нечего, поскольку все выравнивание будет эквивалентным.

 .ящик {
  высота: 100 пикселей;
  граница: 1px сплошной красный;
}
охватывать {
 фон: розовый;
 /*Все эти значения будут определять поле строки*/
 высота строки: 25 пикселей;
 размер шрифта: 20 пикселей;
}