如何使用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显示同样的问题，这次包括一个fontawesome图标。
警报号4按预期工作，没有主图标。
如果使用flexbox无法做到这一点，我有哪些选择？
答案 0 :(得分：0)
我想你想实现这个目标吗？只需将文字换成<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>
答案 1 :(得分：0)
如果您不想要很多列，则应在Flex容器中使用容器。在这种情况下，您可以在警报容器中使用两个div容器：一个用于图标，一个用于内容。
.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>
<div class="alert-content">
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>
<div class="alert alert-info">
<i class="fa fa-info-circle"></i>
<div class="alert-content">
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>
<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>