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

将div 放在 HTML 中的theButtonsdiv 之前。text1然后删除浮动text1并添加overflow:auto到您的Containerdiv 中。

jsFiddle 示例