Question

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

我不确定为什么有些盒子垂直伸展，为什么图标浮在文本上方的线上。此外，一些文本正在移动到它们应该处于的灰色框之外。我如何让每个图标/标题看起来都像顶部的例子（即带有“Look Inside This Chapter”文本的眼睛glyphicon）？

以下是我正在使用的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/

尝试在保持HTML文本中心的同时保持图标的合理性

2 个答案: