css實現一行文字居中,多行文字左對齊

問題及場景:html

當內容能一行顯示在盒子內時,文字居中對齊。spa

當內容過多換行後顯示在盒子內時,文字左對齊。code

其實這種視覺上的需求仍是蠻常見的。好比用於彈出提示框,當提示內容比較少時,內容居中顯示在彈出框,提示內容比較多時,內容居左對齊。可是其純CSS實現有點麻煩,通常就放掉這個需求,或者,使用JS實現。htm

解決方案:blog

CSS實現代碼以下:it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*當文字爲一行是,則P的寬度小於div的寬度,p標籤居中顯示在盒子內,文字也就居中了 ;當大於一行時,P的寬度和div的寬度是一致的 ,文字就居左對齊了*/
    .content {  width: 200px;  border: 1px solid #ee2415;  text-align: center  ;padding: 2px 5px}
    /*display: inline-block使P的寬度根據文字的寬度伸縮 */
    .content p {  text-align: left;  display: inline-block  }
</style>
<body>
<div class="content">
    <p>內容只有一行居中</p>
</div>
<br>
<div class="content">
    <p>內容多行左對齊,內容多行左對齊</p>
</div>
</body>
</html>

效果以下class

 

相關文章
相關標籤/搜索