Question

我希望在容器div中对齐3个div，如下所示：

[[LEFT]       [CENTER]        [RIGHT]]

容器div是100％宽（没有设置宽度），并且在调整容器大小后中心div应保持在中心位置。

所以我设置：

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

但它变成了：

[[LEFT]       [CENTER]              ]
                              [RIGHT]

任何提示？

Answer 1

使用那个CSS，把你的div这样（先浮动）：

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

P.S。你也可以漂浮，然后向左，然后向中心。重要的是浮子位于“主要”中心部分之前。

PPS 您经常需要最后一个#container这个片段<div style="clear:both;"></div>，它会垂直延伸#container以包含两个侧面浮点数而不是仅从#center并且可能允许两侧伸出底部。

Answer 2

如果您不想更改HTML结构，也可以将text-align: center;添加到包装元素，将display: inline-block;添加到居中元素。

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

现场演示：http://jsfiddle.net/CH9K8/

Answer 3

使用Flexbox水平对齐三个分区

这是一个CSS3方法，用于在另一个div内水平对齐div。

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

justify-content属性有五个值：

flex-start（默认）
flex-end
center
space-between
space-around

在所有情况下，三个div都在同一条线上。有关每个值的说明，请参阅：https://stackoverflow.com/a/33856609/3597276

flexbox的好处：

最小代码;效率很高
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
响应
与花车和桌子不同，它们提供的布局容量有限，因为它们从未用于建筑布局， flexbox是一种现代（CSS3）技术，具有广泛的选项。

要了解有关flexbox的更多信息，请访问：

浏览器支持： 所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer。

Answer 4

Float属性实际上不用于对齐文本。

此属性用于向右侧或左侧或中心添加元素。

div > div { border: 1px solid black;}

<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

float:left输出的

将为[First][second][Third]

float:right输出的

将为[Third][Second][First]

这意味着float =＆gt; left属性会将你的下一个元素添加到前一个元素的左边，相同的情况是右边的

此外，你必须考虑父元素的宽度，如果子元素的宽度总和超过父元素的宽度，那么下一个元素将在下一行添加

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

[First] [Second]

[第三]

所以你需要考虑所有这些方面才能得到完美的结果

Answer 5

我喜欢我的酒吧紧张而充满活力。这适用于CSS 3＆amp; HTML 5

首先，将宽度设置为100px是有限的。不要这样做。
其次，将容器的宽度设置为100％可以正常工作，直到它被称为整个应用程序的页眉/页脚栏，如导航或信用/版权栏。使用right: 0;代替该方案。
您正在使用ID（哈希#container，#left等）而不是类（.container，.left等），这很好，除非你想在你的代码中的其他地方重复你的样式模式。我会考虑改用课程。
对于HTML，无需交换订单：left，center，＆amp;对。 display: inline-block;解决了这个问题，将代码恢复到更清洁，更符合逻辑的顺序。
最后，您需要清除所有浮动，以便它不会混淆未来的<div>。您可以使用clear: both;

总结：

HTML：

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS：

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

使用HAML和SASS时的加分点;）

HAML：

.container
  .left
  .center
  .right
  .clear

SASS：

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

Answer 6

有几种技巧可用于对齐元素。

<强> 01。使用表格技巧

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

<强> 02。使用Flex技巧

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

<强> 03。使用Float技巧

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Answer 7

这可以使用CSS3 Flexbox轻松完成，这个功能将在几乎所有浏览器中将来使用（当<IE9完全死亡时）。

检查Browser Compatibility Table

<强> HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

<强> CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

<强>输出：

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

Answer 8

使用twitter bootstrap：

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>

Answer 9

可能的答案，如果你想保持html的顺序而不使用flex。

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Code Pen Link

Answer 10

<强> HTML：

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

<强> CSS：

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center;提供完美的中心对齐。

JSFiddle Demo

Answer 11

使用Bootstrap 3我创建3个相等宽度的div（在12列布局中为每个div创建4列）。这样，即使左/右部分具有不同的宽度（如果它们不会溢出其列和空间），您也可以保持中心区域居中。

HTML：

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS：

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

要创建没有库的结构，我从Bootstrap CSS复制了一些规则。

HTML：

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS：

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

Answer 12

我做了另一次尝试来简化这个并实现它而不需要容器。

HTML

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

您可以在http://chariotsolutions.com/blog/post/https-with-client-certificates-on

看到它

Answer 13

CSS 网格可以轻松完成这项工作：

#container {
  display: grid;                   /* (1) a grid container */
  grid-auto-flow:column;           /* (2) column layout    */
  justify-content: space-between;  /* (3) align the columns*/
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 14

你可以试试这个：

您的HTML代码如下：

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

和你的css代码如下：

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

所以，它的输出应该是这样的：

[[LEFT]       [CENTER]        [RIGHT]]

Answer 15

当我使用图像作为中心元素时，我必须对接受的答案进行更改：

确保图像包含在div中（在这种情况下为#center）。如果不是，则必须将display设置为block，并且它似乎相对于浮动元素之间的空间居中。

确保设置图片和的容器大小：

#center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}

Answer 16

.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess

Answer 17

你已经正确完成了，你只需要清除你的花车。只需添加

overflow: auto;

到您的容器类。

Answer 18

最简单的解决方案是创建一个包含3列并以该表为中心的表。

<强> HTML：

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

<强>的CSS：

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

Answer 19

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }

如何在另一个div内对齐3个div（左/中/右）？

19 个答案:

使用Flexbox水平对齐三个分区

jsFiddle