html - 垂直对齐文本，包括 href 和/或字体很棒的图标

Question

如何使用 flexbox 垂直对齐 div 中的内容，包括 html 元素和/或 fontawesome 图标？请检查下面的代码片段:

.container {
  width: 500px;
  padding: 20px 0;
}

.alert {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px 40px 15px 24px;
  border-radius: 3px;
  border: 0;
}
.alert a {
  color: inherit;
  text-decoration: underline;
}
.alert .fa-info-circle {
  height: 40px;
  width: 40px;
  margin-left: -8px;
  margin-right: 12px;
  font-size: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="alert alert-info">
    <i class="fa fa-info-circle"></i>
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia repudiandae consectetur ducimus, expedita eum eius, hic ipsa cupiditate assumenda tempore atque, itaque nostrum dolorem distinctio error dolorum ullam iste unde ab. Aut eveniet ratione mollitia a. Veniam, eum quidem. Debitis hic, rem ea ex ad fuga pariatur quae sint.
  </div>
  <div class="alert alert-info">
    <i class="fa fa-info-circle"></i>
    2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">some link</a>Aspernatur mollitia repudiandae consectetur ducimus, expedita eum eius, hic ipsa cupiditate assumenda.
  </div>
  <div class="alert alert-info">
    <i class="fa fa-info-circle"></i>
    3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">some link</a>Aspernatur mollitia repudiandae consectetur ducimus <i class="fa fa-home"></i> expedita eum eius, hic ipsa cupiditate assumenda.
  </div>
  <div class="alert alert-info">
    4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia repudiandae consectetur ducimus expedita eum eius, hic ipsa cupiditate assumenda.
  </div>
</div>

1 号警报按预期工作。

警报编号 2 显示了一个带有 ahref 元素的示例，但现在整个内容被分成几列。

警报编号 3 显示了同样的问题，这次包括一个很棒的图标。

4 号警报按预期工作，没有主图标。

如果 flexbox 无法做到这一点，我有什么选择？

Answer 1

我想你想实现这个目标？只需将您的文本包装成 <span>标签。

.container {
  width: 500px;
  padding: 20px 0;
}

.alert {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px 40px 15px 24px;
  border-radius: 3px;
  border: 0;
}
.alert a {
  color: inherit;
  text-decoration: underline;
}
.alert .fa-info-circle {
  height: 40px;
  width: 40px;
  margin-left: -8px;
  margin-right: 12px;
  font-size: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="alert alert-info">
    <i class="fa fa-info-circle"></i>
    <span>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia repudiandae consectetur ducimus, expedita eum eius, hic ipsa cupiditate assumenda tempore atque, itaque nostrum dolorem distinctio error dolorum ullam iste unde ab. Aut eveniet ratione mollitia a. Veniam, eum quidem. Debitis hic, rem ea ex ad fuga pariatur quae sint.</span>
  </div>
  <div class="alert alert-info">
    <i class="fa fa-info-circle"></i>
    <span>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">some link</a>Aspernatur mollitia repudiandae consectetur ducimus, expedita eum eius, hic ipsa cupiditate assumenda.</span>
  </div>
  <div class="alert alert-info">
    <i class="fa fa-info-circle"></i>
    <span>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">some link</a>Aspernatur mollitia repudiandae consectetur ducimus <i class="fa fa-home"></i> expedita eum eius, hic ipsa cupiditate assumenda.</span>
  </div>
  <div class="alert alert-info">
    <span>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia repudiandae consectetur ducimus expedita eum eius, hic ipsa cupiditate assumenda.</span>
  </div>
</div>