問題及場景: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