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

21

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

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

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

<div id="divBottomHeader">
    <div class="divAccountPicker">
       <span class="divPutTextToFixIssue"><span>                 
    </div>
    <div class="divAccountData">
        <span>Balance: $555</span>
    </div>
</div>​
#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

1

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

41

vertical-align значениеbaseline который

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

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

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

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

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

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

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

Базовая линия 'inline-block' является базовой линией его последнего блока строки в нормальном потоке, если только у него нет ни блоков in-flow line, либо если его свойство 'overflow' не имеет вычисленного значения, отличного от 'visible', в В этом случае базовой линией является нижний край поля.

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

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

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

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