如何垂直对齐文本中的块
How to align blocks inside text verticaly
如何垂直居中对齐 .sub-block-2
元素(如 .sub-block-1
)?
.sub-block-1 应该是 display=flex
.sub-block-2 应该是 display=inline-flex
行为应该与现在相同,除了 .sub-block-1 和 .sub-block-2 应该垂直居中
<div class="wrapper">
<div class='holder'>
Some text
<div class="block">
<div class="sub-block-1"></div>
</div>
<div class="block">
<div class="sub-block-2"></div>
</div>
dsdfsd sdfsdf dsfsdfsdf sdfsdfsdf sdfsdf sdfsdf
</div>
</div>
.wrapper {
width: 300px;
}
.holder {
line-height: 30px;
}
.block {
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
.sub-block-1 {
display: flex;
background: #000;
height: 20px;
width: 60px;
}
.sub-block-2 {
display: inline-flex;
background: #000;
height: 20px;
width: 100px;
}
inline
元素的行高有点古怪。 ()
将 line-height: 0;
添加到 .block
将使 sub-block1
和 sub-block2
垂直对齐,但如果 .block
中有任何文本,则不会有额外的内容space 行之间。
.block {
display: inline-block;
vertical-align: middle;
overflow: hidden;
line-height: 0;
}
如何垂直居中对齐 .sub-block-2
元素(如 .sub-block-1
)?
.sub-block-1 应该是 display=flex
.sub-block-2 应该是 display=inline-flex
行为应该与现在相同,除了 .sub-block-1 和 .sub-block-2 应该垂直居中
<div class="wrapper">
<div class='holder'>
Some text
<div class="block">
<div class="sub-block-1"></div>
</div>
<div class="block">
<div class="sub-block-2"></div>
</div>
dsdfsd sdfsdf dsfsdfsdf sdfsdfsdf sdfsdf sdfsdf
</div>
</div>
.wrapper {
width: 300px;
}
.holder {
line-height: 30px;
}
.block {
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
.sub-block-1 {
display: flex;
background: #000;
height: 20px;
width: 60px;
}
.sub-block-2 {
display: inline-flex;
background: #000;
height: 20px;
width: 100px;
}
inline
元素的行高有点古怪。 (
将 line-height: 0;
添加到 .block
将使 sub-block1
和 sub-block2
垂直对齐,但如果 .block
中有任何文本,则不会有额外的内容space 行之间。
.block {
display: inline-block;
vertical-align: middle;
overflow: hidden;
line-height: 0;
}