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移除浮动内容，并将overflow:auto添加到Container div。

<强> jsFiddle example

文本居中在一个有3个div的容器内

1 个答案: