Question

请解释vertical-align:text-top与vertical-align:text-bottom现象

html代码如下<div style="margin: auto;background-color:#ccc;/* height: 197px; */"><span style="font-size: 20px;line-height: 48px;border: #F44336 solid 1px;margin: 0px;vertical-align: text-top;">滚滚</span><span style="font-size: 30px;border: 1px solid;line-height: 48px;padding-bottom: 0px;">滚滚滚滚滚滚滚</span></div>效果如图1，当我把vertical-align: text-top;改成text-bottom，效果如图二，为什么是这样的效果？





Answer 1

所有浏览器都支持 vertical-align 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

vertical-align 属性设置元素的垂直对齐方式。

描述

baseline    默认。元素放置在父元素的基线上。    

sub    垂直对齐文本的下标。    

super    垂直对齐文本的上标    

top    把元素的顶端与行中最高元素的顶端对齐    

text-top    把元素的顶端与父元素字体的顶端对齐    

middle    把此元素放置在父元素的中部。    

bottom    把元素的顶端与行中最低的元素的顶端对齐。    

text-bottom    把元素的底端与父元素字体的底端对齐。    

%    使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。    

inherit    规定应该从父元素继承 vertical-align 属性的值。    

望采纳