Clever Geek Handbook

Two adjacent spans, one vertically centered, the other not. What for?

In the following SSCCE, I applied a CSS property vertical-align:middle;

to a div .innerContainer

. It has two spaces, one containing text ALPHA BRAVO CHARLIE

and the other containing text SUBSCRIBE NOW

.

#firstSpan

vertically centered. #secondSpan

not. Why?

JsFiddle here.

I want the range #secondSpan

to be vertically mid-aligned as well. How to do it?

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:

enter image description here

+3


source to share


2 answers


The property vertical-align

is applied to the element itself not to content, try

.innerContainer > span {
    vertical-align:middle;
}


UpdatedDemo

In case your browser window is not large enough to show the aligned text, here's the same demo with the displayed text .

+2


source


DEMO

 .innerContainer span{ vertical-align: middle; 
    display:inline-block; }


vertical alignment aligns how you want and inline block prevents subscription from going off now

+1


source






More articles:


All Articles