在網(wǎng)頁制作中,有時候我們會想讓一行文字向下靠攏,而不是默認居中或向上,這個時候就需要用到CSS中的文本垂直對齊屬性。
在CSS中,文本垂直對齊屬性有三個:
vertical-align: top; /* 讓文本向上靠攏 */ vertical-align: middle; /* 讓文本垂直居中 */ vertical-align: bottom; /* 讓文本向下靠攏 */
可以看到,我們需要使用的是“vertical-align: bottom;”屬性。下面我們來看一段代碼示例:
<div class="container"> <p class="text">這是一行文本,希望它靠下顯示。</p> </div>
首先,我們需要在CSS中為文本所在的容器設置高度,否則文本將會默認垂直居中。例如:
.container{ height: 200px; /* 為容器設置高度 */ border: 1px solid #000; /* 美化邊框 */ }
然后,我們只需要為文本添加“vertical-align: bottom;”屬性即可:
.text{ vertical-align: bottom; /* 讓文本向下靠攏 */ }
這樣一來,我們就可以得到我們期望的效果:
這是一行文本,希望它靠下顯示。