css實現一段不夠一行時居中顯示，多於一行時兩端對齊

今天有遇到這個問題，不夠一行要居中才好看，多於一行居中又很難看：

居中

 

兩端對齊

 

一開始想用text-align-last:center; 可是這樣結果是這樣的：

單行的居中了

可是多行的最后一行也居中了。。。

后來改成這樣：

<div class="text"><p>2. Tap WiFi Key Search</p></div>
<div class="text"><p>3. Please wait 5-15 secs in your Wi-Fi Settings for WiFi list to load. Tap on hotspots with "WiFi Master Key WiFi Key Search " to connect</p></div>

.text{
    width: 285px;
    margin: auto;
    padding: 8px;
    background-color: #d8d8d8;
    text-align: center;
    font-size: 15px;
    color: #333;
}
.text p{
    display: inline-block;
    margin: auto;
    text-align: justify;
}

 

可以讓p text-align:justify;display:inline-block;給p加一個外層的框div，這個外層的框text-align:center;
這樣p隨着文字的寬度變化，並且p在div中居中，當p寬度不夠一行的時候就看起來是居中的。

效果就實現了