流体中间div的中心内容为三列布局

Question

我无法为我的生活获取中心div的内容，无论我尝试什么：

HTML

<div class="content-controls">
    <div class="content-controls-left">
        123
    </div>
    <div class="content-controls-middle">
        <img src="logo.png">
    </div>
    <div class="content-controls-right">
        456
    </div>
</div>

CSS

.content-controls {
    width:100%;
}
.content-controls-left {
    float:left;
    width:50px;
}
.content-controls-right {
    float:right;
    width:35px;
}
.content-controls-middle {
    float:left;
    margin:auto 0;
}

我想要发生的是，中间列中的图像始终位于内容控件 - 中间 - 我尝试过以下建议：

1. CSS: center element within a <div> element
2. How do I put 3 div's side by side and center the content in each one
3. Three DIVs next to each other with fluid horizontal width
4. Align image in center and middle within div

以及更多但无济于事 - 我做错了什么？

http://jsfiddle.net/8VS5U/

Answer 1

如果您的中间单元格只包含table内容（图片是），那么最好使用inline版面：

/* Set container to display as a table. */
.content-controls {
    display: table;
    table-layout: fixed;
    width:100%;
}

/* Set div elements within container to display as table cells. */
.content-controls div {
    display: table-cell;
}

.content-controls-left {
    width:50px;
}
.content-controls-right {
    width: 35px;
}

/* Centrally align middle cell content. */
.content-controls-middle {
    text-align: center;
}

JSFiddle demo

Answer 2

您可以像这样更改CSS，它将允许中间div获取剩余空间，这样您就可以对内容进行文本对齐。

<强> CSS：

.content-controls {
    width:100%;
}
.content-controls-left {
    float:left;
    width:50px;
}
.content-controls-right {
    float:right;
    width:35px;
}
.content-controls-middle {
    text-align: center;
}

你必须像这样改变HTML：

<强> HTML：

<div class="content-controls">
    <div class="content-controls-left">123</div>
    <div class="content-controls-right">456</div>
    <div class="content-controls-middle">ABC</div>
</div>

DEMO HERE

Answer 3

试试margin-left:40%;上的.content-controls-middle。

http://jsfiddle.net/8VS5U/7/

正如詹姆斯指出的那样，如果你让窗户变小，它就不会是中心。但是，如果你没有建立一个响应式网站，那就足够了。如果你想要一个坚实的方法我会更喜欢詹姆斯的答案，如果你想要一个hacky方法，我更喜欢詹姆斯的答案：）