jquery - 给一个 "text-align: center"的 div 一个 "text-align: left"仅用于包装内容

Question

使用 CSS 或 JQuery(首选 CSS)，

是否可以采用一个 div(宽度为 100%)，将其内容居中，并将任何换行的内容对齐到左侧？

想象一下以您的浏览器为中心的一组图标。如果您减小浏览器的宽度，而不是在第二行的中心显示环绕图标，我希望它们左对齐。

我在发帖前尝试在这里搜索，但找不到与我的问题完全匹配的内容。

更新:

@Explosion Pills 解决了它，但这里有一个更新的 JSFiddle，它通过将 word-wrap: pre-wrap; 添加到外部 div 来解决 IE 和 Chrome 以外的浏览器>:http://jsfiddle.net/etY4r/2/

Answer 1

您可以仅使用 CSS 来完成此操作(而且非常简单)。外部 div 可以是 text-align: center 和内部 div(包含图标)text-align: left with display: inline-block:

http://jsfiddle.net/ExplosionPIlls/etY4r/

inline-block 元素在整个 div 的上下文中居中，但是当您足够小地减小窗口大小时，它会导致元素包裹在内部元素本身内并且它们对齐向左。