Вопрос по vertical-alignment, css, html – Почему этот элемент inline-block имеет содержимое, которое не выровнено по вертикали?

21

Наткнулся на странную проблему CSS. Может кто-нибудь объяснить, почему поле с содержимым не выровнено по вертикали?

Если вы поместите текст в промежуток с классом.divPutTextToFixIssue - он выравнивается правильно.

http://jsfiddle.net/KgqJS/88/


    
       <span class="divPutTextToFixIssue"><span>                 
    
    
        <span>Balance: $555</span>
    
​
</span></span>
#divBottomHeader {
    background-color: #d5dbe0;
    height: 43px;
}
.divAccountPicker {
    display: inline-block;
    background: blue;            
    width: 200px;
    height: 40px;
}
.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
}​

Ваш Ответ

4   ответа
0

............................... Привет сейчас добавлюvertical-align:top в вашем.divAccountData, .divAccountPicker учебный класс как это

.divAccountData, .divAccountPicker {
    vertical-align: top;
}

Live демо

если раньшеdisplay:inline-block; чем привыкли ко всемvertical-align:top

-1

попробуй это

.divPutTextToFixIssue {
   display:inline-block;
 }

jsFiddle

41

По умолчаниюvertical-align значениеbaseline который

Выравнивает базовую линию блока с базовой линией родительского блока

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

Вы должны изменить его наtop выровнять блоки сверху, например:

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

базисный определяется как

линия, на которой большинство буквсидеть" и ниже которого спуски простираются

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

Базовая линиявстроенный блок» является базовой линией своего последнего линейного блока в нормальном потоке, если у него нет ни линейных блоков в потоке, либо если его 'переполнение» свойство имеет вычисленное значение, отличное от 'видимый», в этом случае базовой линией является нижний край поля.

отCSS2 Визуальное форматирование деталей модели

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

Изменить: Найдено связанных вопросовПочему этот элемент inline-block перемещается вниз?

1

Вам нужно добавитьvertical-align: top; в.divAccountPicker демонстрация

Похожие вопросы