多行标题左侧的图标答案

【问题标题】：Icon left of multi-line heading多行标题左侧的图标
【发布时间】：2019-01-30 09:07:51
【问题描述】：

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

目前的样子：

我想要什么：

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

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

我尝试将图标分成单独的h1，然后浮动或内联显示其中的每一个，但因为它是多行文本，所以这些都不起作用。

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

【问题讨论】：

标签： html css alignment

【解决方案1】：

聚会有点晚了，但如果其他人也有同样的问题 - 这是 CSS Flexbox 的一个简单修复（这是一种新的...ish 样式，但到目前为止已经得到了相当强大的支持）。

（以下代码的注意事项：您可以将<i> 包装在<div> 中，或在必要时使用其他内容，但我建议不要包含第二个<h1> 标签，因为这可能会导致搜索引擎优化问题。基本上，您需要具有两个子级的 .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（底部对齐）。

【讨论】：

【解决方案2】：

添加这个

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

【讨论】：

有什么方法可以让垂直定位很好地适应标题是 1 行还是 2 行？它对于 1 行标题来说太高了。

【解决方案3】：

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

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

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

【讨论】：

【解决方案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/

【讨论】：