In the following SSCCE, I applied a CSS property vertical-align:middle;
to the .innerContainer
div. It has two spans: one containing the ALPHA BRAVO CHARLIE
text, and the other containing the SUBSCRIBE NOW
text.
The #firstSpan
seems to be vertically aligned in the middle. The #secondSpan
doesn't. Why?
I want the #secondSpan
span to also be aligned in the middle vertically. How do I do that?
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;
}
Screenshot:
The property vertical-align
apply to the element itself not to the content, try
.innerContainer > span {
vertical-align:middle;
}
In case your browser window isn't wide enough to show the aligned text, here's the same demo with some of the text taken out.