Question

以下是我的小提琴，我试图将文字与Icon字体垂直对齐。请让我知道做出这种调整的适当方法是什么：

如何将字体图标与this fiddle

上的文字垂直对齐

Wrong output:
[ICON]Text
 Text Text 

Expected Output:

       Text
[ICON] Text
       Text

Answer 1

您只需将图标浮动（ bootply #1 ）：

.panel-title .glyphicon {
    float: left;
    margin-right: 10px;
}

但我喜欢在浮动元素（需要额外的元素来封闭文本）之后使用块格式化上下文（BFC）属性。它基本上会在您的浮动中创建一个列，而不是像往常一样让文本环绕它（ bootply #2 ）：

HTML：

<a href="#collapseFour">
    <span class="left mr1 glyphicon glyphicon-file"></span>
    <span class="bfc">Reports Reports Reports Reports Reports Reports Reports</span>
</a>

CSS：

.left {
    float: left;
}
.bfc {
    overflow: hidden;
}

Answer 2

把它分开。

将图标放在一个单独的div中，如下所示：

<div>
    {icon}
</div>
<div>
    {text}
</div>

并将它们内联。 display:inline-block ......这应该有用。

Answer 3

你可以制作一个像这样的小桌子

 <table>
  <tr>
    <td valign="middle">[ICON]</td><td>Text<br>Text<br>Text</td>
  </tr>
</table>

中间对齐的字体图标与右侧的文本

3 个答案: