您的位置：首页 > Web前端 > CSS

css实现文字指定位置显示，底部对齐，文字在块内的垂直对齐

2014-07-23 16:40 453 查看

１.实现CSS文字底部对齐

<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 p{
position:absolute;
bottom:0px;
padding:0px;
margin:0px
}
</style>
</head>
<body>
<div id="txt">
<p><a href="#" target="_blank">网页特效</a></p>
</div>
</body>
</html>

２.文字在块内的垂直对齐，内容高度不固定，容器高度固定

<div class="cont">
<div class="inner">比较满意比较满意比较满意</div><div class="v">cssHack</div>
</div>

* {
margin: 0;
padding: 0;
}
.cont {
background-color: #ccc;
font-size: 24px;
height: 150px;
text-align: center;
overflow: hidden;
width: 280px;
}
.cont .inner,
.cont .v {
display: inline-block;
zoom: 1;*display: inline; /* 用于触发支持IE67 inline-block */
}
.cont .inner {
line-height: 1.8;
padding: 0 4px 0 5px;
vertical-align: middle;
width: 262px;
}
.cont .v {
line-height: 150px;
text-indent:-9999px;
width: 1px;
}

参考地址：http://uecss.com/css-vertical-center.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航