溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css怎么讓文字居于div的底部

發(fā)布時間:2020-11-30 11:02:25 來源:億速云 閱讀:374 作者:小新 欄目:web開發(fā)

小編給大家分享一下css怎么讓文字居于div的底部,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

css讓文字居于div的底部的方法:可以借助position屬性的相對定位和絕對定位來實現(xiàn),如【#txt{position:relative;} #txt p{position:absolute;}】。

背景:

css對文字的布局上沒有靠容器底部對齊的參數(shù),可以考慮使用position屬性來解決。

(學習視頻分享:css視頻教程)

屬性介紹:

position屬性指定一個元素(靜態(tài)的,相對的,絕對或固定)的定位方法的類型。

屬性值:

  • absolute    生成絕對定位的元素,相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。

  • fixed    生成固定定位的元素,相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。

  • relative    生成相對定位的元素,相對于其正常位置進行定位。因此,"left:20" 會向元素的 LEFT 位置添加 20 像素。

  • static    默認值。沒有定位,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。

舉例:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<style type="text/css">
#txt{ 
 
 height:300px;
 width:300px;
 border:1px solid #333333;
 text-align:center;
 position:relative;
 
}
#txt p{
 position:absolute;
 bottom:0px;
 padding:0px;
 margin:0px
}
</style>
</head> 
 
<body>
<div id=txt>
<p>aadsad</p>
</div>
</body>
</html>

以上是“css怎么讓文字居于div的底部”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI