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