多行标题左侧的图标 [英] Icon left of multi-line heading

问题描述

我正在尝试在标题的左侧显示一个图标(真棒字体)，该图标当前在标题位于单行时有效，但是当标题移至第二行时，对齐会变得混乱./p>

目前的样子:

我想要什么:

这是我所拥有的最简单的形式(小提琴):

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

我尝试将图标分成单独的h1，然后浮动显示或内联显示每个图标，但是因为它是多行文本，所以没有一个起作用.

什么是让我寻找对齐的干净方法?

解决方案

聚会晚了一点，但是如果其他人也遇到同样的问题-这很容易用CSS Flexbox解决(这是一个新的...风格，但目前已经得到了强有力的支持).

(以下代码的注意事项:您可以将<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(底部对齐).

I'm trying to display an icon (font awesome) to the left of a heading, which currently works when the heading is on a single line, but the alignment gets messed up when the heading goes onto a second line.

What it currently looks like:

What I want:

Here's the simplest form of what I have (fiddle):

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

I've tried separating the icon into a separate h1, then float or inline display each of those, but because it's multi-line text none of that has worked.

What's a clean way to get this alignment I'm looking for?

解决方案

A little late to the party, but if anyone else is having the same issue - this is an easy fix with CSS Flexbox (which is a new...ish style, but by this point is pretty robustly supported).

(Note for code below: You can wrap the <i> in a <div>, or something else if necessary, but I would advise against including a second <h1> tag as that could cause SEO issues. Basically, you need the .wrapper class with two children - one as the icon (or a div containing the icon), and one as the header.)

First, the new HTML:

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

And the new CSS:

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

Note: align-items: center; sets vertical alignment. This can also be flex-start (top-aligned) or flex-end (bottom-aligned) as desired.

这篇关于多行标题左侧的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！