css - 三列布局中流体中间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;
}

我希望发生的是中间栏中的图像始终以 content-controls-middle 为中心 - 我已经尝试过以下建议:

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布局:

/* 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 .