How to align vertically span text (floated) to bottom

Question

I current have this result:

But it should look like this:

m and s should be aligned to the bottom.

My code:

 .right-timer-area { width: 128px; height: 52px; line-height: 52px; font-size: 36px; font-weight: 300; color: #ffa000; float: right; margin: 0 50px 0 0; } .right-timer-area > span.timer-centered { height: 36px; display: inline-block; vertical-align: middle; } .right-timer-area > span.timer-centered span { display: inline-block; float: left; line-height: 1; vertical-align: bottom; } .right-timer-area .timer-sm { font-size: 16px; } 

 <div class="right-timer-area"> <span class="timer-centered"> <span class="timer-big">15</span> <span class="timer-sm">m</span> <span>-</span> <span class="timer-big">45</span> <span class="timer-sm">s</span> </span> </div> 

But it didn't work. Are there any ways of solving, without changing .right-timer-area (it's centered inside other div ) and without table-layout ? If yes, then how?

JS Fiddle: http://jsfiddle.net/zmads0rp/1/

Answer 1

Your issue is that you have added float: left; to .right-timer-area > span.timer-centered span . This overrides display: inline-block; and means that vertical-align has no effect. To obtain the desired result make the following changes:

• Remove float: left; from .right-timer-area > span.timer-centered span
• Change .right-timer-area .timer-sm to .right-timer-area > span.timer-centered .timer-sm to make it more specific. This ensures that it overrides rules set in .right-timer-area > span.timer-centered span
• Add vertical-align: sub; to .right-timer-area > span.timer-centered .timer-sm
• Remove the whitespace between the span s in HTML either by removing the actual space, reducing the font-size of timer-centered to 0 or by using the comment trick

 .right-timer-area { clear: right; width: 128px; height: 52px; line-height: 52px; font-size: 36px; font-weight: 300; color: #ffa000; float: right; margin: 0 50px 0 0; } .right-timer-area > span.timer-centered { height: 36px; display: inline-block; vertical-align: middle; } .right-timer-area > span.timer-centered span { display: inline-block; line-height: 1; vertical-align: bottom; } .right-timer-area > span.timer-centered .timer-sm { font-size: 16px; vertical-align: sub; } .right-timer-area .fontsize { font-size: 0; } .right-timer-area span.fontsize span { font-size: 36px; vertical-align: baseline; } 

 <div class="right-timer-area"> <span class="timer-centered"> <span class="timer-big">15</span><span class="timer-sm">m</span><span>-</span><span class="timer-big">45</span><span class="timer-sm">s</span> </span> </div> <div class="right-timer-area"> <span class="timer-centered fontsize"> <span class="timer-big">15</span> <span class="timer-sm">m</span> <span>-</span> <span class="timer-big">45</span> <span class="timer-sm">s</span> </span> </div> <div class="right-timer-area"> <span class="timer-centered"> <span class="timer-big">15</span><!-- --><span class="timer-sm">m</span><!-- --><span>-</span><!-- --><span class="timer-big">45</span><!-- --><span class="timer-sm">s</span> </span> </div> 

Answer 2

You can use display: table-cell and remove float: left from .right-timer-area > span.timer-centered span :

 .right-timer-area { width: 128px; height: 52px; line-height: 52px; font-size: 36px; font-weight: 300; color: #ffa000; float: right; margin: 0 50px 0 0; } .right-timer-area > span.timer-centered { height: 36px; display: inline-block; vertical-align: middle; } .right-timer-area > span.timer-centered span { display: table-cell;/*change to table-cell*/ line-height: 1; vertical-align: bottom; } .right-timer-area .timer-sm { font-size: 16px; } 

 <div class="right-timer-area"> <span class="timer-centered"> <span class="timer-big">15</span> <span class="timer-sm">m</span> <span>-</span> <span class="timer-big">45</span> <span class="timer-sm">s</span> </span> </div> 

Answer 3

You can try like this -

 .right-timer-area { /*width: 128px;*/ height: 52px; line-height: 52px; font-size: 36px; font-weight: 300; color: #ffa000; float: right; margin: 0 50px 0 0; display: table; } .right-timer-area > span.timer-centered { height: 36px; display: inline-block; vertical-align: middle; display: table-row; } .right-timer-area > span.timer-centered span { display: inline-block; /*float: left;*/ line-height: 1; vertical-align: bottom; display: table-cell; } .right-timer-area .timer-sm { font-size: 16px; } 

 <div class="right-timer-area"> <span class="timer-centered"> <span class="timer-big">15</span> <span class="timer-sm">m</span> <span>-</span> <span class="timer-big">45</span> <span class="timer-sm">s</span> </span> </div> 

I hope it will helps you.