CSS實戰技巧:大小不固定,多行文字的垂直居中
阿新 • • 發佈:2019-02-08
1.單行文字
html程式碼
<div>
<p>單行文字</p>
</div>
css程式碼
div {
width: 100px;
height: 100px;
/*垂直居中*/
line-height: 100px;
/*水平居中*/
text-align: center;
border: 5px solid #000;
}
效果如下
2.多行文字
html程式碼
<div>
<p>
美國大選已進入白熱化階段。據美國廣播公司(ABC)9月24日報道,美國共和黨總統候選人唐納德•特朗普計劃在11月8日大選投票日前再投入1.4億美元的競選廣告費。
</p>
<p>
特朗普資深資訊顧問傑森•米勒表示,特朗普將投入1億美元在電視上購買競選廣告時間,剩餘4千萬美元將用於數字媒體廣告投放。
</p>
</div>
css程式碼
div {
width: 400px;
height : 400px;
border: 5px solid #000;
/*以下為主要程式碼*/
display: table-cell;
vertical-align: middle;
}
效果圖(IE8中測試)