垂直对齐文本段落旁边的字体 - 真棒图标

Question

我想在左边有一个字体很棒的图标,在右边有我的文字段落.font-awewome图标必须垂直居中于文本旁边,所有文本都需要保留在图标的右侧(即使文本较长并且可能位于图标下方).

如何实现这一目标,因为我拥有所能正确的代码？

小提琴...... 小提琴

HTML:

<div class="modal-body">
<p><i class="fa fa-check-circle"></i> bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>
</div>

CSS:

i.fa.fa-check-circle {
    color:#000;
    font-size:80px;
    float:left;
    display:inline-block;
    text-align:center;
}

.modal-body p {
    font-style:LuzSans-Book;
    font-size:30px;
    line-height:1.43em;
}

Answer 1

尝试并组织这样的代码

HTML

<div class="modal-body">
    <div class="icon"><i class="fa fa-check-circle"></i></div>
    <div class="text">bla bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div>
</div>

CSS

.icon {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid pink;
}

i.fa.fa-check-circle {
    color:#000;
    font-size:80px;
    float:left;
    display:block;
    text-align:center;
    background-color: red;
    width: 32px;
    height: 32px;
}

.text {
    display: table-cell;
    vertical-align: top;
    font-style:LuzSans-Book;
    font-size:30px;
    line-height:1.43em;
    border: 1px solid orange;
}

如果你想看到它的实际效果,我用这段代码更新了你的小提琴.我添加了边框,因此您可以看到每个表格单元格和背景颜色,以便您可以看到Awesome Font图标.

如果您不想在左列中间使用Font Awesome图标,则可以将垂直对齐设置为top.你可以阅读更多关于表对准这里.