html - 带有 3 个 div 的容器内的文本居中

Question

我有以下 HTML:

<div id="Container">

    <input type="button" value="button" id="button1" />

    <div id="text1">
        some text here
    </div>

    <div id="TheButtons">
        <input type="button" value="button" class="MyButtons" id="button2" />
        <input type="button" value="button" class="MyButtons" id="button3" />
        <input type="button" value="button" class="MyButtons" id="button4" />
        <input type="button" value="button" class="MyButtons" id="button5" />
    </div>

</div>

以及以下 CSS:

#Container{
    background:red;
    width:500px;
    height:50px;}

#button1{
    margin:7px;
    float:left;}

#text1{
    margin:7px;
    text-align:center;
    float:left;}

#TheButtons{
    float:right;
    margin:7px;}

.MyButtons{
    margin:0px 3px;
    float: left;}

正如您在 JsFiddle 中看到的那样此处，文本左对齐。右边的按钮对于不同的语言会有不同的文本，所以我不能明确定义第三个 div TheButtons 的宽度。如何让文本在 button1 和 TheButtons 之间居中？

谢谢。

Answer 1

将 theButtons div 放在 HTML 中的 text1 div 之前。然后从 text1 中移除 float 并将 overflow:auto 添加到您的 Container div。

jsFiddle example