将左对齐文本块视觉居中[重复]

Question

我有一个瓷砖网格，其宽度是容器的百分比。每个图块都包含一个图标和一个标题，文本与图标左对齐。

我希望图标和文本的集合在该图块中居中。问题是一旦文本足够长可以换行，包含文本的 div 就会声称它是容器的整个剩余宽度。

tl:dr，我希望用红色圈出的空间分布在图标和文本的两侧，因为它会查找“教育”图块。

一些图块看起来像：

<ul class="grid">
  <li class="tile">
    <div class="container">
      <i>i</i>
      <div class="title">
        Education
      </div>
    </div>
  </li>
  <li class="tile">
    <div class="container">
      <i>i</i>
      <div class="title">
        title containnnng longish words
      </div>
    </div>
</ul>

使用 css 之类的：

ul.grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tile {
  display: block;
  width: 150px; /* this is a percentage of the container width in real life */
  height: 80px;
  background-color: rgb(192, 230, 245);
  margin: 5px;
}

.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* this is an icon, I just don't feel like importing font awesome here */
i {
  margin-right: 5px;
}

JS fiddle 让它更清晰： https://jsfiddle.net/avaleske_socrata/nt0vhtmg/1/

Answer 1

这是一个快速而肮脏的解决方案，但它可以完成工作，您可以从那里编辑它以按照您的方式工作。

基本上，容器获得text-align:center;，图标获得width:5px;，并且容器的新子项是一个名为内容的div。最终标题类获得max-width:calc(100% - 10px); display:inline;。

这个想法是让标题的最大宽度等于框的整个宽度，减去图标占用的宽度（5px 边距和 5px 宽度）。重要的是，我们将标题的显示设置为inline 而不是inline-block，这是通常的方式。最后，我们使用内容 div 将其全部包装到它需要的最小大小，以便它可以是text-align:center'd

https://jsfiddle.net/nt0vhtmg/20/