CSS вертикальное выравнивание inline / inline-block элементов


144

Я пытаюсь получить некоторые inlineи inline-blockкомпоненты выровнены по вертикали в div. Почему spanв этом примере человек настаивает на том, чтобы его опускали? Я пробовал оба vertical-align:middle;и vertical-align:top;, но ничего не изменилось.

HTML:

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>

CSS:

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

РЕЗУЛЬТАТ:
введите описание изображения здесь

FIDDLE


обратите внимание, что этого не произойдет, если <a>элементы содержат текст внутри, см. эту ссылку
С.Серпушан,

Ответы:


272

vertical-alignприменяется к выравниваемым элементам, а не к их родительскому элементу. Чтобы выровнять дочерние элементы div по вертикали, сделайте следующее:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

См .: http://jsfiddle.net/dfmx123/TFPx8/1186/

ПРИМЕЧАНИЕ : vertical-alignотносительно текущей текстовой строки, а не полной высоты родительского элемента div. Если вы хотите , родитель , divчтобы быть выше , и по- прежнему имеют элементы вертикально по центру, установите div«s line-heightсвойство , а не его height. Для примера перейдите по ссылке jsfiddle выше.


Это перестает работать, если вы укажете высоту для внешнего div.
Абхранил Дас

4
@AbhranilDas vertical-alignотносится к текущей текстовой строке, а не к родительскому элементу. Чтобы все работало так, как вы хотите, установите div line-heightвместо его height.
Диего


5

Простое перемещение обоих элементов влево дает тот же результат.

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}

span {
background:red;
display:inline-block;
float:left;
}

Проблема с перемещением их влево заключается в том, что они переносятся на следующую строку, когда размер браузера становится слишком маленьким. Иногда вам нужно, чтобы элементы оставались встроенными даже за пределами браузера, и поэтому inline-blockэто единственное решение.
Джейк Уилсон,

Хотя эта проблема с упаковкой может быть проблемой, я бы сказал, что это действительно хорошее решение для тех случаев, когда упаковка подходит. Он элегантен, передает дух желаемого эффекта и не требует изменений в родительском элементе.
Crispen Smith 06

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.