2016-02-20 3 views
5

мне сказали, что:Вертикальное выравнивание не работает на встроенный блок

Вертикальное выравнивание работает только для встроенных, встроенных блоков, изображений и таблицы элементов.
Он должен применяться к дочернему элементу, поскольку он противоположен родительскому элементу , в отличие от выравнивания текста.

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

#wrapper { 
 
border: 1px solid black; 
 
width: 500px; 
 
height: 500px; 
 
} 
 
#content { 
 
border: 1px solid black; 
 
display: inline-block; 
 
vertical-align: middle; 
 
}
<div id = 'wrapper'> 
 
<div id = 'content'> content </div> 
 
</div>

+0

@Oriol Я имел в виду середину. И прежде чем вы спросите, да, середина является действительным значением. http://www.w3schools.com/cssref/pr_pos_vertical-align.asp И что вы подразумеваете под линейкой? – frosty

+0

@Oriol Кроме того, я не ищу другого способа сделать это. Я просто ищу объяснение, почему это не работает, поэтому, пожалуйста, удалите дубликат. – frosty

+0

@Oriol Если я понимаю это правильно, ссылаетесь ли вы на #content как поле строки? Потому что здесь всего 2 элемента: #wrapper и #content. – frosty

ответ

14

Это не работает потому что vertical-align устанавливает выравнивание содержимого линейного уровня по отношению к их строке строки, а не к их содержащему блоку:

Это свойство влияет на вертикальное позиционирование внутри линейного поля ящиков, генерируемых элементом линейного уровня.

line box является

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

Когда вы видите какой-нибудь текст, который имеет несколько строк, каждый из которых представляет собой коробку линии. Например, если у вас есть

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

enter image description here

Если есть только одна строка, как в вашем случае, это также коробка линия

enter image description here

Использование vertical-align: middle центров .content verti внутри этой строки. Но проблема в том, что поле строки не вертикально центрировано внутри содержащего блока.

Если вы хотите что-то центрирования по вертикали в середине содержащего блока см How to align text vertically center in div with CSS?

+0

поэтому, если его гарантированный текст текста отдельной строки и высота строки имеют ту же длину, что и высота его контейнера, текст содержимого будет находиться в середине контейнера. ie: '#content {line-height: 500px}' https://jsfiddle.net/28ng9ovs/ –

+0

@AizzatSuhardi Да, и вы можете использовать 'white-space: nowrap' для предотвращения разрывов строк. – Oriol

2

Vertical-align на встроенный/встроенный блок элементов, изображения, текст ... выравнивать элемент вместе, а не с одним из родителей.

Пример

Использования: выравнивание смайлик изображения в тексте

можно обмануть, добавив ширину 0px, 100% высоту псевдо-элемента

#wrapper { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 200px; 
 
    vertical-align: middle; 
 
} 
 
#wrapper:after{ 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 0px; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
#content { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}
<div id = 'wrapper'> 
 
    <div id = 'content'> content </div> 
 
</div>

1

Это работает для меня с помощью вертикального выравнивания текста: верхом;

<div class="box"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div> 
<div class="box"> 
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div> 
<div class="box"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div> 

.box { 
    display: inline-block; 
    width: 20%; 
    margin: 5px; 
    padding:10px; 
    border-top: 5px solid #000000; 
    vertical-align: text-top; 
} 

jsfiddle

Смежные вопросы