两条独立的线条相距很远

Question

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

图像在中心位置很好，但由于某些原因，当我使用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;
}

希望这能让你朝着正确的方向前进。