CSS3的vertical-align
屬性用于設置元素內容在垂直方向上的對齊方式。
這個屬性可以應用于任何display
屬性為inline-level
的元素,包括inline
、inline-block
、以及一些表格元素。
vertical-align
屬性可以接受如下的值:
baseline:默認值。元素基線對齊。 sub:文本下標對齊。 super:文本上標對齊。 top:元素頂部對齊。 bottom:元素底部對齊。 middle:元素垂直中心對齊。 text-top:文本頂部對齊。 text-bottom:文本底部對齊。
值得注意的是,這個屬性的對齊方式會根據元素的父級元素和兄弟元素的不同而有所差異。比如說,在一個inline-block
元素中,如果這個元素內部包含的文本和圖片大小不一,使用vertical-align:
可以讓它們在同一水平線上。
<div style="display: inline-block;"> <p style="display: inline-block; vertical-align: middle;">這是一段文本</p> <img src="picture.png" alt="圖片" style="display: inline-block; vertical-align: middle;"> </div>
在這個示例中,<p>
和<img>
兩個元素使用了inline-block
來實現并排放置。然后,<p>
和<img>
都設置了vertical-align: middle
,讓它們在垂直方向上居中對齊。
總的來說,vertical-align
屬性是很實用的一個屬性,可以在布局和排版中發揮重要的作用。