編碼的世界 / 優質文選 / 生涯

css實現文字指定位置顯示，底部對齊，文字在塊內的垂直對齊

2021年10月08日
-   

１.實現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

熱門文章