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

問題及場景：

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

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

其實這種視覺上的需求還是蠻常見的。比如用於彈出提示框，當提示內容比較少時，內容居中顯示在彈出框，提示內容比較多時，內容居左對齊。但是其純css實現有點麻煩，一般就放掉這個需求，或者，使用js實現。

解決方案：

css實現**如下：

<

!doctype html>
"en"
>
"utf-8"
>
title<
/title>
<
/head>
/*當文字為一行是，則p的寬度小於div的寬度，p標籤居中顯示在盒子內，文字也就居中了 ;當大於一行時，p的寬度和div的寬度是一致的 ,文字就居左對齊了*/
.content 
/*display: inline-block使p的寬度根據文字的寬度伸縮 */
.content p 
<
/style>
="content"
>
內容只有一行居中<
/p>
<
/div>
="content"
>
內容多行左對齊，內容多行左對齊<
/p>
<
/div>
<
/body>
<
/html>效果如下：
css實現一行文字居中，多行文字左對齊
問題及場景 當內容能一行顯示在盒子內時，文字居中對齊。當內容過多換行後顯示在盒子內時，文字左對齊。其實這種視覺上的需求還是蠻常見的。比如用於彈出提示框，當提示內容比較少時，內容居中顯示在彈出框，提示內容比較多時，內容居左對齊。但是其純css實現有點麻煩，一般就放掉這個需求，或者，使用js實現。解決方...
一行文字居中多行文字左對齊
lang en charset utf 8 titletitle head 當文字為一行是，則p的寬度小於div的寬度，p標籤居中顯示在盒子內，文字也就居中了 當大於一行時，p的寬度和div的寬度是一致的 文字就居左對齊了 rk box display inline block使p的寬度根據文字的寬...
CSS多行文字垂直居中
今天需要將文字垂直居中，就是一行是垂直居中，多行也是垂直居中。效果如下 實現 同事提供 doctype html html head lang en meta charset utf 8 title title style listdiv listdivleft listdivleft span l...