Question

我在容器div中有三个内联块元素。

HTML看起来像这样：

<div class="container">
   <div class="field">Text</div>
   <div class="field">Text</div>
   <div class="arrow"></div>
</div>

CSS看起来像这样：

.container {
    padding: 10px; 
    border: solid 1px #e5e5e5;
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    font-size: 0;
}

.field {
    font-size: 16px;
    display: inline-block;
}

.arrow {
    display: inline-block;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #f00;
    vertical-align: middle;
}

我看不出这个HTML / CSS有什么问题，但箭头没有出现在容器的中间。相反，箭头靠近容器的底部。此外，当我取消设置vertical-align: middle属性时，箭头在div中向上移动，这很奇怪。如果我设置vertical-align: top，则箭头会转到div的顶部。知道为什么会这样吗？

Answer 1

默认$.Scratch.Set "v1" 123为vertical-align。当与中间配对时，这将与真正的中间不同。尝试将所有三个设置为中间。

baseline

.container {
    padding: 10px; 
    border: solid 1px #e5e5e5;
    border-radius: 3px;
    background-color: white;
    box-sizing: border-box;
    font-size: 0;
}

.field {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
}

.arrow {
    display: inline-block;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #f00;
    vertical-align: middle;
}

Answer 2

将.arrow从inline-block更改为inline

https://jsfiddle.net/aznfacLe/

vertical-align：middle移动元素的方向错误但vertical-align：top按预期工作

2 个答案: