CSS文本居中小技巧

我我的比較喜歡簡單粗暴的上實際的結果的，因此，請看以下需求（其實很簡單的，工做中一直有用到這種方法，就是沒想着去寫，而後看到其餘人寫了一些，我也把個人應用場景也寫下，權當記錄吧！）

看到這個彈窗了嗎？一般咱們的彈窗裏的內容文本都是居中的，那麼問題來了，怎麼保持短的時候居中，長的時候則據左呢？

這是在工做中會遇到的，對你來講可能不是彈窗或者說是其它的東西。咱們解析下這個彈窗：

• 內容短，居中，text-align: center

• 內容長，居左，text-align: left

不寫兩套樣式內容，怎麼將兩個text-align綜合在一塊兒？常作的話，估計看了前面的圖也知道答案的了，看以下樣式：

.container {
    text-align: center;
}

.content {
    display: inline-block;
    text-align: left;
}

知道了嗎？看出什麼了嗎？ (。・∀・)ノ

來人，上代碼 https://jsfiddle.net/lyplba/ye63j3e6/embed/result/

參考：aligning-text-smartly-in-css