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

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

133 голосов
/ 12 марта 2012

Я пытаюсь получить несколько 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;
}

РЕЗУЛЬТАТ:
enter image description here

FIDDLE

Ответы [ 3 ]

254 голосов
/ 12 марта 2012

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

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

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

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

23 голосов
/ 12 марта 2012

Даешь vertical-align:top; в a & span. Как это: 

a, span{
 vertical-align:top;
}

Проверьте это http://jsfiddle.net/TFPx8/10/

4 голосов
/ 12 марта 2012

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

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;
}
...