html - 使用 Bootstrap 在图标(glyph/font-awesome)旁边居中多行

Question

我想在一些 Font Awesome 图标旁边居中放置一些文本。如果文本只占用一行，这很好用。但是一旦需要多行，它就会停止正常工作。

这就是我想要的:

|----|
|    | Very short text.
|----|

|----| Long long long long long long long long
|    | long long long long long long long long
|----| long long long long long long long text.

这是现在的样子:

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

HTML

<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>

CSS

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

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

两行可能就足够了，但三行会更好。

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

总的来说，这是通过在两列的一行中设置图标和文本来实现的。确保每一列与另一列分开，并且您的长文本不会渗入左列。