html - 两条分开的线将它们彼此隔开很远

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

图像在中心对齐很好，但是由于某些原因，当我使用两行文本时，它们将自身间隔到其父级的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;
        }
    }
}

最佳答案

您可以从向.value选择器添加以下属性开始：

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

希望这能给您正确的方向。

关于html - 两条分开的线将它们彼此隔开很远，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30812852/