css vertical-align屬性
vertical-align屬性是用來設置元素的垂直對齊方式的,它定義了行內元素的基線相對於該元素所在父元素基線的垂直對齊。視頻教程推薦:CSS教程
vertical-align屬性可以在table表格中設置單元格內容的對齊方式;它兼容所有的瀏覽器。
使用text-top、text-bottom屬性值
在css vertical-align屬性中,設置text-top屬性值可以讓行內元素的頂端與其父元素字體的頂端對齊,而,設置text-bottom屬性值可以讓行內元素的底端與其父元素字體的底端對齊。
下面我們通過壹個簡單示例來看看text-top、text-bottom屬性值如何設置文字的上標和下標。
<style type="text/css">
.demo{
font-size: 20px;
}
.super span{
vertical-align: text-top;
font-size: 12px;
color: red;
}
.sub span{
vertical-align: text-bottom;
font-size: 12px;
color: red;
}
</style>
<div class="demo">
<p class="super">壹段測試文本,擁有<span>上標</span></p>
<p class="sub">壹段測試文本,擁有<span>下標</span></p>
</div>首先使用vertical-align屬性的text-top和text-bottom屬性值,分別把<span>標簽內的文本固定在相對於其父元素<p>標簽文本的頂端和底端的位置,再設置<span>標簽內的文本的字體大小,就擁有了壹個上標或者下標。
效果圖:
使用sub、super屬性值
在css vertical-align屬性中,設置super屬性值可以讓行內元素相對於該元素所在父元素上浮壹定距離,形成垂直對齊文本的上標;而,設置sub屬性值可以讓行內元素相對於該元素所在父元素下沈壹定距離,形成垂直對齊文本的下標。
下面我們來看看具體效果:
<style type="text/css">
.demo{
font-size: 20px;
}
.sup span{
vertical-align: super;
color: red;
}
.sub span{
vertical-align: sub;
color: red;
}
</style>
<div class="demo">
<p class="sup">壹段測試文本,擁有<span>上標</span></p>
<p class="sub">壹段測試文本,擁有<span>下標</span></p>
</div>效果圖:
現在的上標、下標和其父元素文本的大小壹致,不是很好看,可以把上標、下標的字體大小設置成12px,看看效果:
總結: