multi-line 标题左侧的图标

Question

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

目前的样子：

我想要的：

这是我所拥有的最简单的形式 (fiddle)：

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

我试过将图标分成单独的 h1，然后浮动或内嵌显示每个图标，但因为它的 multi-line 文本 none 起作用了。

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

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

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

Fiddle: https://jsfiddle.net/0fadtcm7/

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

Answer 3

晚会有点晚了，但如果其他人遇到同样的问题 - 这是 CSS Flexbox 的一个简单修复（这是一种新的......风格，但到此为止非常强大的支持）。

（以下代码注意事项：您可以将 <i> 包装在 <div> 中，或者如有必要，可以将其包装在其他东西中，但我建议不要包含第二个 <h1> 标记可能会导致 SEO 问题。基本上，您需要 .wrapper class 和两个 children - 一个作为图标（或 div 包含图标），一个作为 header.)

一、新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 (top-aligned) 或 flex-end (bottom-aligned)。

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/

multi-line 标题左侧的图标

Icon left of multi-line heading

html

css

alignment