css - 在一个 div : one of fixed width and the other of variable width/height 中居中两个 div

Question

我有一个情况，我有一个固定宽度的 div，包含从 Twitter 提取的图像，另一个可变宽度的 div 包含可变长度的用户文本。我想要实现的是以下内容:

我可以使用具有 background-image 和 padding-left 的单个 div 来完成这项工作。但我希望能够将 border-radius 应用于 img 元素，这对于 background-image 来说根本不可能。

如果我在外部 div 上执行 text-align: center，它会让我走到一半。 <强> Here's a DEMO 和截图:

但这显然不是我想要的。

我怎样才能做到这一点？

Answer 1

提出要求，您将收到 — 一个简化的 jsFiddle example :

作为额外的好处，文本也垂直居中!

HTML:

<div class="logo">
    <div class="logo-container">
        <img src="http://img.tweetimag.es/i/appsumo_b.png" />
    </div>

    <div class="logo-name">
        AppSumo is a really really long title that continues down the page
    </div>
</div>

CSS:

.logo {
    background-color: #eee;
    display: table-cell;
    height: 100px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 600px;
}

.logo-container {
    background-color: #fff;
    border-radius: 10px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 75px;
}

.logo-name {
    font: bold 28px/115% Helvetica, Arial, sans-serif;
    padding-left: 85px;
}