为什么这个内联块元素的内容不是垂直对齐的 [英] Why does this inline-block element have content that is not vertically aligned

问题描述

遇到一个奇怪的 CSS 问题.有人可以解释为什么包含内容的框没有垂直对齐吗?

如果您将文本放入具有 .divPutTextToFixIssue 类的范围内 - 它会正确对齐.

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

 #divBottomHeader {背景颜色:#d5dbe0；高度:43px；}.divAccountPicker {显示:内联块；背景:蓝色；宽度:200px；高度:40px；}.divAccountData {显示:内联块；背景:红色；宽度:400px；高度:40px；}

<div class="divAccountPicker"><span class="divPutTextToFixIssue"></span>
<div class="divAccountData"><span>余额:$555</span>

解决方案

默认 vertical-align 值为 baseline 其中

<块引用>

将框的基线与父框的基线对齐

注意:您可以通过将 vertical-align:baseline 添加到您的 .divAccountData 选择器来查看此默认值的实际效果.由于 baseline 是默认的，所以对齐方式不变.

你需要把它改成top来对齐顶部的块，例如:

.divAccountData {显示:内联块；背景:红色；宽度:400px；高度:40px；垂直对齐:顶部；}

基线定义为

<块引用>

大多数字母坐"在其下方的行，在其下方延伸

解决为什么添加文本似乎可以解决问题的原因

<块引用>

'inline-block' 的基线是它在正常流中最后一个 line box 的基线，除非它没有 in-flow line box 或者它的 'overflow' 属性的计算值不是 'visible'，在这种情况下，基线是底部边距边缘.

来自 CSS2 视觉格式模型详细信息

所以只添加一个字符会改变基线，导致第二个块出现在相同的垂直对齐方式.这仅适用于两个块包含相同行数的情况.尝试在您的一个块中添加更多单词，您会看到，如果没有在第二个块上强制 vertical-align:top，它将根据第一个块中存在的文本行数移动.>

发现一个相关问题为什么这个内联块元素向下推?

Came across a weird CSS issue. Can someone explain why the box having content is not vertically aligned?

If you put text inside the span with class .divPutTextToFixIssue - it aligns properly.

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

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

<div id="divBottomHeader">
        <div class="divAccountPicker">
           <span class="divPutTextToFixIssue"></span>                 
        </div>
        <div class="divAccountData">
            <span>Balance: $555</span>
        </div>
    </div>

解决方案

The default vertical-align value is baseline which

Aligns the baseline of the box with the baseline of the parent box

Note: You can see this default value in action by adding vertical-align:baseline to your .divAccountData selector. Since baseline is default the alignment is unchanged.

You need to change it to top to align the blocks at the top, for example:

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

Baseline is defined as

the line upon which most letters "sit" and below which descenders extend

To address why adding text seems to fix the problem it is because

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

from CSS2 Visual formatting model details

So adding just a single character changes the baseline, causing the second block to appear at the same vertical alignment. This only works if both blocks contain the same number of lines. Try adding more words to one of your blocks and you will see that without forcing vertical-align:top on the second block it will move depending on how many lines of text exist in the first block.

Edit: Found a related question Why is this inline-block element pushed downward?

这篇关于为什么这个内联块元素的内容不是垂直对齐的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！