当前位置:  Web服务器/前端>html/css

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

 
    发布时间:2013-8-11  


    本文导语:  css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对齐,并且靠近的距离可以调节,精确到像素,在网上搜集到三段代码如下。代码1:<!DOCTYPE HTML PUBLIC "-//W3...

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

代码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="/index.html" 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>
</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>

以上代码仅供参考。

    您可能感兴趣的文章:

  • 本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
    转载请注明:文章转载自:[169IT-IT技术资讯]
    本文标题:在div中使用css让文字底部对齐的方法
相关文章推荐:


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3