多行标题左侧的图标

Question

我正在尝试在标题左侧显示一个图标（字体很棒），当标题位于一行时，该图标当前有效，但当标题进入第二行时，对齐会变得混乱。 / p>

目前的情况：

我想要的是什么：

这是我所拥有的最简单的形式（fiddle）：

<div>
  <h1><i class="fa fa-file-text fa-fw fa-lg"></i>Multi-line Title</h1>
</div>

我已经尝试将图标分成单独的h1，然后浮动或内联显示每个图标，但因为它是多行文本，所以没有任何效果。

我正在寻找什么是一种干净的方式来获得这种对齐？

Answer 1

添加此

div h1 {
display: inline-block;
position: relative;
padding-left: 55px;
vertical-align: middle;
}

div h1 i {
position: absolute;
left: 0;
top: 50%;
margin-top: -10px; // half height of icon
}

Fiddle

Answer 2

派对有点晚了，但是如果其他人有同样的问题 - 这是一个简单的解决方案，使用CSS Flexbox（这是一个新的... ish风格，但到目前为止得到了相当强大的支持）。 / p>

（请注意以下代码：如果需要，您可以将<i>包装在<div>或其他内容中，但我建议不要包含第二个<h1>标记，因为这可能会导致SEO问题。基本上，你需要带有两个孩子的.wrapper类 - 一个作为图标（或包含图标的div），一个作为标题。）

首先，新HTML：

<div>
  <i class="fa fa-file-text fa-fw fa-lg"></i>
  <h1>Multi-line Title</h1>
</div>

新的CSS：

div {
    display: flex;
    align-items: center;
}

注意：align-items: center;设置垂直对齐方式。根据需要，这也可以是flex-start（顶部对齐）或flex-end（底部对齐）。

Answer 3

在这种情况下，在图标上使用绝对定位可以解决问题。此外，调整它的上边距以与标题文本对齐。

小提琴：https://jsfiddle.net/0fadtcm7/

div h1 i {
    position: absolute;
    margin-left: -55px;
    margin-top: 3px;
}
div h1 {
    padding-left: 55px;
}

Answer 4

只是找到了解决此问题的简便方法。
HTML：

<div>
  <h1 class="icon">
    <i class="fa fa-file-text fa-fw fa-lg"></i>
  </h1>
  <h1>Multi-line Title</h1>
</div>

CSS：

div {
  width: 225px;
  background-color: #ccc;
  padding: 10px;
}

.icon {
  display: inline;
}

h1 {
  display: inline-block;
  vertical-align: middle;
  width: 55%;
}

最重要的一点是将宽度更改为合适的值。
在这里使用JSFiddle：https://jsfiddle.net/hfqoj5d9/