在div中居中div

Question

http://jsfiddle.net/yr15y98e/

我怎样才能将小提琴中的“CENTER”（黄色）div居中。

<div id="container">
<div id="leftdiv">left</div>
<div id="middlediv">middle</div>
<div id="rightdiv">right</div>
</div>

Answer 1

在您的左侧div中添加float:left，然后将text-align:center应用到您的容器中心：

#container {
    height: 100px;
    width: 200px;
    background-color: grey;
    text-align:center; /* ADD THIS */
}
#container div {
    display: inline-block;
}
#rightdiv {
    background-color: blue;
    float: right;
}
#middlediv {   
    background-color: yellow;
}
#leftdiv {
    background-color: red;
    float:left;  /* ADD THIS */
}

http://jsfiddle.net/yr15y98e/1/

Answer 2

您还可以使用display: flex和justify-content: space-between;

＆＃13;

＆＃13;

*{
    padding: 0;
    margin: 0;
}
#container {
    height: 100px;
    width: 100%;
    background-color: grey;
    display: flex;
    justify-content: space-between;
}
#rightdiv {background-color: blue;}
#middlediv {background-color: yellow;}
#leftdiv {background-color: red;}

＆＃13;

<div id="container">
    <div id="leftdiv">left</div>
    <div id="middlediv">middle</div>
    <div id="rightdiv">right</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要更改html的顺序，如下所示：

<div id="container">
<div id="leftdiv">left</div>
<div id="rightdiv">right</div>
<div id="middlediv">middle</div>
</div>

并在middlediv上应用margin auto：

#container {
    height: 100px;
    width: 200px;
    background-color: grey;
}
#container div {
    display: inline-block;
}
#rightdiv {
    background-color: blue;
    float: right;
}
#middlediv {
    background-color: yellow;
    margin: 0 auto;/*center the div*/
}
#leftdiv {
    background-color: red;
    float: left;
}