我想要在同一行中有两个文本块,其中较大字体的文本垂直居中居中,较小字体的文本具有与第字体较大的那个。 看看我的小提琴在哪里大文本居中根据需要。尽管较小的文本也居中,但我希望它稍微低一些,以便感觉两个文本块在同一“行”上。 https://jsfiddle.net/phzzhevq/2/如何居中大字体文本并让小字体文本居中对齐底部
HTML:
<div class="my-table">
<div class="my-cell">
<span class="large-text">Large text</span>
</div>
<div class="my-cell">
<span class="small-text">Small text</span>
</div>
</div>
CSS:
.my-table {
display: table;
height: 80px;
background-color: red;
}
.my-cell {
display: table-cell;
vertical-align: middle;
}
.large-text {
font-size: 40px;
}
.small-text {
font-size: 20px;
}
它的工作原理!只剩下一个小问题。 “我的表”变得大于80px。是否有可能使它具有80px的高度 – Mike
而不是在**。my-table **中使用'display:table'使用'display:inline-block'。并在**。my-cell **中使用'display:inline-block'。 – SreenathPG
无法通过使用内联块将其垂直对齐。看到小提琴:https://jsfiddle.net/phzzhevq/6/ – Mike