在 div 内居中 div

Question

我将如何在 fiddle.

中将 "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

您需要像下面这样更改 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;
}

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>

在 div 内居中 div

Centering div inside div

html

css

center