在div中使用css讓文字底部對齊的方法

時間 2019-11-09

標籤 div 使用 css 文字底部對齊方法欄目 CSS 简体版

原文原文鏈接

css對文字的佈局上沒有靠容器底部對齊的參數，不過咱們能夠使用position的相對和絕對定位功能輕鬆實現文字靠近div底部對齊，而且靠近的距離能夠調節，精確到像素，在網上搜集到三段代碼以下。由www.169it.com 蒐集整理css

代碼1:html

1佈局

2ui

3spa

4code

5xml

6htm

7ci

8文檔

<!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>CSS實現文字底部對齊</title>

<style type="text/css">

#txt{

height:300px;

width:300px;

border:1px solid #333333;

position:relative

}

#txt p{

position:absolute;

bottom:0px;

padding:0px;

margin:0px

}

</style>

</head>

<body>

<div id="txt">

<p><a href="http://www.169it.com" target="_blank">最新IT科技資訊</a></p>

</div>

</body>

</html>

代碼2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>無標題文檔</title>

<style>

body{font-size:12px;}

.div{width:500px;height:200px;border:1px solid #333;background:#ccc;}

.div2{

height:20%;

width:300px;

margin:0 auto;

background:#eee;

bottom: 0px;

position: relative;

text-align: center;

}

.div3{height:80%;}

</style>

</head>

<body>

<div class="div">

<div class="div3"></div>

<div class="div2">

看看是否是你想要得效果<br/>

不這樣的話用table是比較方便達到你要求的效果

</div>

</body>

</html>

代碼3:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>CSS實現文字底部對齊</title>

<style type="text/css">

#txt{

height:246px;

width:512px;

border:1px solid #000000;

position:relative

}

#txt span{

position:absolute;

bottom:10px;

padding:0px;

margin:0px

}

</style>

</head>

<body>

<div id="txt">

<span><a href="#" target="_blank">169IT科技資訊</a></span>

</div>

</body>

</html>

以上代碼僅供參考。

文章來源:在div中使用css讓文字底部對齊的方法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。