如何使用display：table-cell在div周围添加填充？

Question

我有一个图像和一个包含垂直居中文本的div。我需要div在它周围填充边框和边框，我希望它看起来像这样：http://i.imgur.com/edB2Z3o.png

这是我最接近的：http://jsfiddle.net/cym5jhzL/

<div id="table-header-phone">

    <div id="image-container" class="cell-header-image">
        <img src="http://i.imgur.com/Y3dNk4q.jpg" />
    </div>

    <div id="tagline-phone" class="cell-phone">
        <div class="tagline">Text can be added here, this needs to stay centered</div>
        <div class="phone-number">(800) 555-5555</div>
    </div>   

</div>

#table-header-phone {
    display: table;
    width: 940px;
    background: navy;
    padding: 20px;
}

#tagline-phone {
    background: #DD1D1D;
    color: #FFF;
    font-size: 20px;
    text-align: center;
}

.cell-header-image {
    display: table-cell;
    width: 630px;
    position:relative;
}

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

Answer 1

检查这个小提琴：

http://jsfiddle.net/cym5jhzL/1/

添加了：

#image-container { display: block; margin-right: 10px; }