在div中使用css让文字底部对齐的方法

时间：2014-11-13 16:55:27 阅读：225 评论：0 收藏：0 [点我收藏+]

标签：style http io color ar os 使用 sp strong

css对文字的布局上没有靠容器底部对齐的参数，不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐，并且靠近的距离可以调节，精确到像素，在网上搜集到三段代码如下。由www.169it.com 搜集整理

代码1:

<!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让文字底部对齐的方法

在div中使用css让文字底部对齐的方法

标签：style http io color ar os 使用 sp strong

原文地址：http://my.oschina.net/u/1766067/blog/343986

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行