在3格的容器内居中的文本

Question

I have the following 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>

And the following 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;}

As you can see in the JsFiddle here, the text is aligned to the left. The buttons on the right will have different text for different languages so I can't explicitly define the width of the third div TheButtons . How can I get the text to be centered between button1 and TheButtons ?

Thanks.

Answer 1

Place the theButtons div before the text1 div in your HTML. Then remove the float from text1 and add overflow:auto to your Container div.

jsFiddle example