[英]How to align vertically span text (floated) to bottom
I current have this result: 我目前有这个结果:
But it should look like this: 但是它应该看起来像这样:
m and s should be aligned to the bottom. m和s应该与底部对齐。
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
? 有没有解决的方法,而无需更改.right-timer-area
(位于其他div
的中心)并且没有table-layout
? If yes, then how? 如果是,那怎么办?
JS Fiddle: http://jsfiddle.net/zmads0rp/1/ JS小提琴: http : //jsfiddle.net/zmads0rp/1/
Your issue is that you have added float: left;
您的问题是您添加了float: left;
to .right-timer-area > span.timer-centered span
. 到.right-timer-area > span.timer-centered span
。 This overrides display: inline-block;
这将覆盖display: inline-block;
and means that vertical-align
has no effect. 表示vertical-align
无效。 To obtain the desired result make the following changes: 为了获得所需的结果,请进行以下更改:
float: left;
移除float: left;
from .right-timer-area > span.timer-centered span
来自.right-timer-area > span.timer-centered span
.right-timer-area .timer-sm
to .right-timer-area > span.timer-centered .timer-sm
to make it more specific. 将.right-timer-area .timer-sm
更改为.right-timer-area > span.timer-centered .timer-sm
,使其更具体。 This ensures that it overrides rules set in .right-timer-area > span.timer-centered span
这样可确保它覆盖在.right-timer-area > span.timer-centered span
设置的规则 vertical-align: sub;
添加vertical-align: sub;
to .right-timer-area > span.timer-centered .timer-sm
到.right-timer-area > span.timer-centered .timer-sm
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 通过删除实际空间,将timer-centered
的font-size
减小timer-centered
0
或使用注释技巧,来删除HTML中span
之间的空白。 .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>
You can use display: table-cell
and remove float: left
from .right-timer-area > span.timer-centered span
: 您可以使用display: table-cell
并从.right-timer-area > span.timer-centered span
删除float: left
:
.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>
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. 希望对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.