在div中居中两个div：一个是固定宽度，另一个是可变宽度/高度

Question

我的情况是，我有一个div固定宽度，包含从Twitter中提取的图像，另一个div包含可变长度的用户文本。我想要达到的目标如下：

我可以使用div和background-image的{​​{1}}来做到这一点。但是我希望能够将padding-left应用于img元素，这对于border-radius来说是无法实现的。

如果我在外background-image上text-align: center，它就会让我到达那里。 Here's a DEMO 和屏幕截图：

但这显然不完全是我想要的。

我该如何做到这一点？

Answer 1

会是这样的吗？ http://jsfiddle.net/uPPTM/6/

.logo {
    width:80%;
    margin:auto;
    background-color: red;
}
.logo-container {
    border: 1px solid gold;
    width:73px;
    height: 73px;
    display: inline-block;
    vertical-align:middle; 
}
.logo-name {
    display: inline-block;
}

Answer 2

询问并收到 - 简化的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;
}

Answer 3

您可以将图像容器（或图像本身没有容器）浮动到左侧，清除左侧的任何内容......然后将文本浮动到左侧，清除任何内容。

.logo-container{
    float:left;
    clear:left;
}
.logo-name{
    float:left;
    clear:right;
}

您可以使用边距调整文本的距离。

.logo-name{
    float:left;
    clear:right;
    margin-top:10px;
    margin-left:5px;
}

Answer 4

使用左侧位置的绝对定位将标题文本推过图像。

http://jsfiddle.net/uPPTM/9/

.logo { width: 50px; }
.title { 
    position: absolute; 
    top: 0;
    left: 50px;
    font-size: 32px; 
    text-align: center; 
}
img {
    border: 1px solid gray;
    border-radius: 15px;
}

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