Ответ 1

Почему vertical-align: bottom не работает один

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

Так как во встроенном потоке vertical-align определяет, как элементы позиционируются на основе исходной базовой линии; И использование этого свойства на ярлыке не изменит положение базовой линии его родителя.

Элементы встроенного уровня (inline, inline-block) расположены по умолчанию baseline, И если они имеют разную высоту, самый высокий элемент определит, где остальные будут размещены.

т.е. В поточном потоке самый высокий элемент будет влиять на/перемещать базовую линию родителя:

Поиск решения

Следовательно, в случаях, когда родитель имеет явный height, если у нас может быть встроенный ребенок, который имеет ту же высоту, что и parent (полноразмерный ребенок), это повлияет на поток inline и переместит базовую линию вниз:

Чтобы сохранить элементы (включая буквы с descenders) внутри родительского элемента, мы должны выровнять их по вертикали с помощью объявления vertical-align: bottom;.

10.8 Расчет высоты линии: свойство vertical-align

baseline
Совместите базовую линию с базой исходного поля. Если в поле нет базовой линии, выровняйте нижнюю край края с исходной базой.

bottom
Выровняйте нижнюю часть выровненного поддерева с нижней частью строки.

Общие сведения

Поэтому вы можете создать элемент с полной высотой (Лично мне лучше пойти с псевдоэлементы) в родительском, чтобы выровнять метку внизу.

ПРИМЕР ЗДЕСЬ

#contain-word-div:after {
  content: "";
  display: inline-block;
  height: 100%;            /* Let it be as height as the parent */
  vertical-align: bottom;  /* Align the element at the bottom   */
}

#contain-word-lab {
  display: inline-block;
  vertical-align: bottom;  /* Align the element at the bottom   */
}

Ответ 2

быстрый пример

http://jsfiddle.net/oa2gmuq3/

если вы добавите

position:absolute;
bottom:0px;

на ярлык, которому нравится держать его внизу

Ответ 3

Примените position:relative к родительскому div и сделайте свою метку как position:absolute.

 #contain-word-div {
 height: 100px;
 position:relative;
 }
 #contain-word-lab {
  position:absolute;
  bottom:5px;
 }

DEMO

Ответ 4

установите его как position: absolute;

#contain-word-lab {
  position:absolute;
  bottom:5px;
}

Ответ 5

vertical-align имеет тенденцию работать лучше всего, когда контейнеры представляют собой таблицы/табличные элементы (например, table, tr, td, th) или встроенные текстовые элементы (например, span). Однако, поскольку элементы table для макета не являются хорошей идеей. Мы можем сделать другие элементы такими же, как они, используя свойства display:table; и display:table-cell; css.

Попробуйте применить следующий css:

#contain-word-div {
  height: 100px;
  border: 1px solid black; /* added just for visualising position */
  display:table;
}
#contain-word-lab {
  display:table-cell;
  vertical-align: bottom;
  padding-bottom: 5px; /* use padding to give the label more height rather than trying to push the "cell" upwards */
}

DEMO

Ответ 6

vertical-align применяется только к ячейкам таблицы. Если вы хотите поместить элемент в нижней части своего родителя, вам нужно указать его position: absolute; и bottom: 0;.

Ответ 7

Попробуйте сделать следующее

FIDDLE DEMO

#contain-word-lab {
    vertical-align='bottom';/***Remove This***/
    bottom:2px;
    position:absolute;
}

Ответ 8

"bottom" не будет работать в любом случае:) Попробуйте просто bottom, без ". Кроме того, ваша этикетка также нуждается в высоте. Теперь используется автоматическая высота, и это точно размер шрифта. Я бы предложил добавить line-height: 100px; к вашей метке.