居中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

應用text-align:center要將容器添加float:left你的左邊格，然後中心：

#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

您需要更改HTML的順序如下圖所示：

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

並應用邊緣自動對middlediv像thi S：

#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; 
} 

Answer 3

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

*{ 
 
    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;}

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