html怎麼設定文字向下-html教學-PHP中文網

html怎麼設定文字向下

藏色散人

發布： 2023-01-03 09:25:34

原創

21093 人瀏覽過

html設定文字向下的方法：先建立一個HTML範例檔案；然後在body中定義一段文字內容；接著在父元素中設定css屬性「position:relative」；最後在存放文字的子元素中設定css屬性為“boottom:0”即可。

html怎麼設定文字向下

本文操作環境：Windows7系統、HTML5&&CSS3、Dell G3電腦

1、如果是文字或其他區塊級元素。使用定位的思想。 position：absolute，然後boottom：0。父元素要設定為position：relative。

因為絕對定位是相對於最近一個非static定位的元素的相對位置。但是如果出現多個元素在同一父元素內同時需要絕對定位移動位置，那麼需要注意，如果直接這樣做，會造成那些元素重疊，而不是與float一樣的正常排布。

這是因為他們有相同的父元素，使用絕對定位之後就會移動到父元素的左邊，而不是還在原來的位置。

為了解決這個情況，需要給那些需要移動位置的元素嵌套一個父元素，讓他們的父元素去定位，給他們的父元素設定relative，這樣原先的父元素就變成了爺元素。

這樣一來，再給他們設定完絕對定位加位置屬性之後就不會出現重疊的效果，因為他們都是在父元素的限度內去移動，再跑也跑不出來。這樣就又不重疊，又能貼近底部，但是要注意。

新巢狀的父元素需要一個固定的高度，高度要高於內部元素。不然他的高度就是被內部元素撐開的。

【推薦：HTML影片教學】

範例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>文字靠下</p>
</div>
</body>
</html>

登入後複製

效果圖：

html怎麼設定文字向下

2、如果是文字（區塊級元素沒試過，到時候可以試試看）。那麼需要為包著文字的那個div設定成 display：table-cell vertical：bottom。這樣文字就貼著div底部了。

範例：

HTML：

<div>文字在div的底部对齐</div>

登入後複製

css樣式：

div{
    width:200px;height:50px;  /*设置div的大小*/
    border:4px solid #beceeb; /*为了便于观察，显示出边框*/
    display:table-cell; 
    vertical-align:bottom;
    }

登入後複製

效果圖：

html怎麼設定文字向下