使用Bootstrap将图标旁边的多行（glyph / font-awesome）居中

Question

我想要将一些文字放在一些字体 - 真棒图标旁边。如果文本只占一行，这可以正常工作。但只要需要多行，它就会停止正常工作。

这就是我想要的：

<div>
  <span class="myIcon fa fa-gear"></span>
  <span class="myText">Very short text.</span>
</div>
<br>
<div>
  <span class="myIcon fa fa-gear"></span>
  <span class="myText">Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text.</span>
</div>

这就是现在的样子：

这是我的代码：http://www.bootply.com/EVPYyfpcxw

HTML

.myIcon {
  vertical-align:middle;
  text-align: center;
  font-size:50px;
  line-height:75px;
  width: 75px;
}

.myText {
  font-weight: 700;
  font-size: 22px;
}

CSS

done

两条线可能就够了，但三条线路可能还不错。

Answer 1

<div class="row">
  <div class="col-md-3">
    <span class="myIcon fa fa-gear"></span>
  </div>
  <div class="col-md-9">
    <span class="myText">Very short text.</span>
  </div>
</div>

有关此内容的更多信息，请参阅： http://getbootstrap.com/css/#grid

总体而言，这可以通过将您的图标和文本连续设置为两列来实现。确保每列与另一列分开，并且您的长文本不会渗入左列。