css:理解vertical-align
阿新 • • 發佈:2018-12-22
css:理解vertical-align
一、vertical-align的定義:
(1)vertical-align 屬性用於定義“周圍的文字、inline 元素以及 inline-block 元素”相 對於該元素基線的垂直對齊方式。這裡的“該元素”指的是被定義了 vertical-align 屬性的 元素。
(2)vertical-align 屬性對 inline 元素、inline-block 元素和 table-cell 元素有效, 對塊 元素無效。
(3)在表格單元格中,vertical-align 屬性可以定義單元格td 元素中內容的對齊方式。 td 元素是 table-cell 元素,也就是說 vertical-align 屬性對 table-cell 型別元素有效。
(4)vertical-align 屬性允許指定負長度值(如 -2px)和百分比值(如 50%)。
二、vertical-align的應用
1.圖片與文字的對齊
example:
<div>
text.<img src="timg.jpg" id="img1"/>text(top).
</div>
<div>
text.<img src="timg.jpg" id="img2"/>text(middle).
</div>
<div>
text.<img src="timg.jpg" id="img3"/>text(baseline).
</div>
<div>
text.<img src="timg.jpg" id="img4"/>text(bottom).
</div>
#img1{
vertical-align: top;
}
#img2{
vertical-align: middle;
}
#img3{
vertical-align : baseline;
}
#img4{
vertical-align: bottom;
}
效果:
2.表單欄位的對齊
demo:
<form>
<input type="radio" value="女士" name="gender" class="radio-layout"/>女士
<input type="radio" value="男士" name="gender" class="radio-layout"/>男士
<input type="checkbox" name="hobby" value="football" class="checkbox-layout"/>足球
<input type="checkbox" name="hobby" value="basketball" class="checkbox-layout"/>籃球
</form>
.radio-layout,.checkbox-layout{
vertical-align:-1px;/*元素相對於基線向下偏移1px;*/
/*vertical-align: 1px;元素相對於基線向上偏移1px;*/
}
效果:
3.table-cell內部元素的垂直居中
example:
<div>
<img src="timg.jpg"/>
</div>
div{
width:200px;
height:200px;
display:table-cell;
vertical-align:middle;
text-align: center;
border:1px solid silver;
}
效果:
三、總結:
1.vertical-align屬性的作用範圍:一是文字,inline,inline-block元素之間的對齊,二是table-cell內部的元素的對齊方式。
2.vertical-align屬性對塊元素不起作用。
3.vertical-align的應用:圖片、文字的對齊;垂直居中;表單欄位的對齊。