在接下来的 SSCCE 中,我将 CSS 属性 vertical-align:middle;
应用于 .innerContainer
div。它有两个跨度:一个包含 ALPHA BRAVO CHARLIE
文本,另一个包含 SUBSCRIBE NOW
文本。
#firstSpan
似乎在中间垂直对齐。 #secondSpan
没有。 为什么?
我希望 #secondSpan
跨度也垂直居中对齐。我该怎么做?
HTML:
<div class="container">
<div class="innerContainer">
<span class="firstSpan">Alpha Bravo Charlie</span>
<span class="secondSpan">Subscribe now</span>
</div>
</div>
CSS:
.container {
margin-bottom:0px;
padding: 0 10px 0 10px;
}
.innerContainer {
background-color: rgb(74, 72, 72);
padding: 30px 10px 30px 10px;
text-align: center;
/* vertical-align: middle; */
}
.firstSpan {
font-family: Oxygen, sans-serif ;
text-transform: uppercase;
font-weight: bold;
font-size: 32px;
color: white;
letter-spacing: 2px;
}
.secondSpan {
margin: 0 40px 0 40px;
padding: 15px;
background-color:green;
text-transform:uppercase;
font-weight: bolder;
font-size: 12px;
letter-spacing: 1px;
}
屏幕截图:
最佳答案
vertical-align
属性应用于元素本身而不是内容,试试
.innerContainer > span {
vertical-align:middle;
}
如果您的浏览器窗口不够宽,无法显示对齐的文本,这里是 the same demo with some of the text taken out .
关于html - 两个相邻的span : One is vertically center aligned, 另一个不是。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27603614/