How to vertically align text (floating) down

Question

I current has the following result:

But it should look like this:

m and s should be aligned at the bottom.

My code is:

.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 that did not work. Are there any solutions without changing .right-timer-area (it is centered inside another div ) and without table-layout ? If so, how?

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

Answer 1

Your problem is that you added float: left; at .right-timer-area > span.timer-centered span . This overrides display: inline-block; and means that vertical-align not valid. To get the desired result, make the following changes:

• Delete 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 the rules set in .right-timer-area > span.timer-centered span
• Add vertical-align: sub; at .right-timer-area > span.timer-centered .timer-sm
• Remove the space between the span in HTML or by removing the actual space, decreasing the font-size from timer-centered to 0 or 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 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> 

Hope this helps you.