Question

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

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

小提琴...... Fiddle

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;
}

我updated your Fiddle使用此代码，如果您想看到它的实际效果。我添加了边框，因此您可以看到每个表格单元格和背景颜色，以便您可以看到Awesome Font图标。

如果您不想在左列中间使用Font Awesome图标，则可以将垂直对齐设置为top。您可以阅读有关table alignment here的更多信息。

Answer 2

只需

style="padding: 10px"

为我工作！

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

2 个答案: