以视觉方式居中显示左对齐文本块

Question

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

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

：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小提琴让它更清晰： https://jsfiddle.net/avaleske_socrata/nt0vhtmg/1/

Answer 1

这是一个快速而又肮脏的解决方案，但它完成了这项工作，你可以根据自己的需要对其进行编辑。

基本上，容器获得body，图标获得html，容器new child是div命名内容。最后，标题类获得html。

我们的想法是将标题的最大宽度设置为框的整个宽度，减去图标占据的宽度（5px边距和5px宽度）。重要的是，我们将标题的显示设置为text-align:center;而不是width:5px;这是常用的方法。最后，我们使用内容div将其全部包装到所需的最小大小，以便它可以max-width:calc(100% - 10px); display:inline;'d

{{3}}