html - 两条独立的线彼此之间的距离真的很远

Question

我创建了一个分成 2 个部分的 block ，一个图像和一些文本。

图像在中心对齐很好，但由于某种原因，当我使用 2 行文本时，它们将它们自己分隔到其父级的 top 和 bottom 端。

我想尽可能避免使用负边距。

JSFiddle:http://jsfiddle.net/8rLf4qob/

HTML:

<div class="info-block">
    <span class="icon"><i class="fa fa-user"></i></span>
    <span class="value">495<br /><small>New Users</small></span>
</div>

CSS:

.info-block {
    width: 100%;
    background: #F9F9F9;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    margin: auto;
    padding: 0;
    text-align: center;
    height: 100px;

    .icon {
        width: 40%;
        float: left;
        margin: auto;
        background-color: #27344C;
        color: white;
        height: 98px;
        line-height: 98px;
        font-size: 40px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    .value {
        height: 100px;
        margin: 0;
        padding: 0;
        color: #333;
        text-align: center;
        font-size: 32px;

        small {
            font-size: 16px;
            margin: 0; padding: 0;
        }
    }
}

Answer 1

您可以从将以下属性添加到您的 .value 选择器开始:

.value{
  display: table-cell;
  vertical-align: middle;
}

希望这能插入您朝着正确的方向前进。