尝试在 HTML 中保持文本中心的同时使图标左对齐

Question

我正在尝试使所有图标都向左对齐，同时保持文本居中，并在必要时将文本换行到另一行。但是，我希望图标与标题内联。现在看起来是这样的：enter image description here

我不确定为什么某些框会垂直拉伸，以及为什么图标会漂浮在文本上方的行上。此外，一些文本在它们应该位于的灰色框之外移动。我如何让每个图标/标题看起来像上面的示例（即带有“查看本章内部”文本的眼睛字形图标）？

这是我正在使用的 HTML 代码：

<div class="text-left"><span class="glyphicon glyphicon-download">
</span> <div class="text-center">Teacher Pre-Assessment</div></div>

我也尝试了这段代码，看看是否可行，但我没有任何运气：

<div style="float: left; text-align: left"><span class="glyphicon 
glyphicon-download"></span> <div class="text-center"> Teacher Post-  
Assessment </div></div>

Answer 1

在这种情况下，您可以将图标位置设置为绝对位置，然后设置left:0。但是，这会使图标超出.text-left div。所以你需要将它的位置设置为相对，因为绝对元素是根据最近的具有相对位置的祖先来定位的。

.text-left {
  position: relative
}

.text-left .glyphicon {
  position: absolute;
  left: 0;
}

然后您可以随意放置其他元素。

Answer 2

您可以将图标放入一个伪类中，这样它们就不会弄乱您的 html：

.text-center {
  padding-left: 25px;
  position: relative;
}

.text-center:before {
  position: absolute;
  content:"";
  top:0;
  left:0;
  width: 20px;
  height: 20px;
  background-image: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png) ;
  background-size:100% 100% ;
}

这基本上在 .text-center 中创建了一个绝对定位的 div，这就是为什么 .text-center 需要一些填充以使文本不会在图标下方运行。

示例：https://jsfiddle.net/6mjscdxL/

更多关于伪类的详细信息：https://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/