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

【问题标题】：How to align 3 divs (left/center/right) inside another div?如何在另一个 div 中对齐 3 个 div（左/中/右）？
【发布时间】：2011-02-05 22:01:18
【问题描述】：

我想在一个容器 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]

有什么建议吗？

【问题讨论】：

如果容器的宽度小于 300 像素，除非您设置溢出属性，否则会发生这种情况。
请注意 - 根据@inkedmn 的评论，每列中有一堆内容，如果没有overflow: hidden; 列上的overflow: hidden;，我无法让它们全部在任何容器宽度上正确对齐@ 列.然后在小型设备的媒体查询中，当我将所有 3 列都放在页面中心时，我需要在中间行（这是大型设备上的右列）overflow: hidden;，否则它没有高度并且不是t 在顶行和底行之间垂直居中。

标签： html css alignment css-float

【解决方案1】：

使用该 CSS，将您的 div 像这样放置（浮动优先）：

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

P.S. 你也可以向右浮动，然后向左浮动，然后居中。重要的是浮动出现在“主要”中心部分之前。

PPS 你经常想要最后一个在 #container 这个 sn-p: <div style="clear:both;"></div> 它将垂直扩展 #container 以包含两侧浮动而不是仅从 #center 获取它的高度和可能允许侧面突出底部。

【讨论】：

如果容器不是 100%，你会怎么做？我在这里尝试类似的东西，我希望 div 确实留在容器的右侧，但它浮动到页面的右侧
@Tiago：如果浮动在其中，则它们应保持限制在 div 内。通过将其设置为border:solid 来检查容器的宽度。如果它是 100% 则将其包含在另一个 div 中以将其放置在您的页面中。
另外 - 如果您将这些放在可调整大小的容器中，请确保设置容器的最小宽度以防止右浮动 div 被向下推。
这个答案已经有六年多了。 2016年，正确答案是flexbox。
@torazaburo，也许有不止一个正确答案，有很多方法可以达到同一点，在这种情况下，我必须使用这个解决方案，因为我使用的框架已经设置为左并且使用浮动元素，只需在最后添加中心元素对我来说是完美的。

【解决方案2】：

使用 Flexbox 水平对齐三个 div

这是一个 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 的更多信息，请访问：

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

【讨论】：

在这里和链接的帖子中有很好的解释！ 旁注： 在容器 div 中使用“span”元素作为 flex 项目在 firefox 中有效，但在基于 javafx 的浏览器（webview）中无效。将“spans”更改为“divs”在两者中都有效。
不幸的是，这只适用于相同宽度的项目。另见stackoverflow.com/questions/32551291/…

【解决方案3】：

如果您不想更改 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/

【讨论】：

这是唯一可以根据窗口宽度正确调整大小而不会过早折叠的解决方案。
左右尺寸相等时完美。否则中心不居中。

【解决方案4】：

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

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

div &gt; 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 => 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>

[第一] [第二]

[第三]

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

【讨论】：

【解决方案5】：

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

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.使用浮动技巧

.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>

【讨论】：

【解决方案6】：

我喜欢我的酒吧紧凑而充满活力。这适用于 CSS 3 和 HTML 5

首先，将宽度设置为 100 像素是有限制的。不要这样做。
其次，将容器的宽度设置为 100% 可以正常工作，直到将其作为整个应用程序的页眉/页脚栏，如导航栏或信用/版权栏。在该场景中使用 right: 0;。
对于 HTML，无需交换顺序：左、中和右。 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; }
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案8】：

使用 twitter 引导程序：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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

【讨论】：

它仅在您的示例中将 div 居中，因为文本元素的大小几乎相同，使一个文本更长并且#center div 不再位于中心：jsfiddle.net/3a4Lx239

【解决方案11】：

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>

【讨论】：

【解决方案12】：

使用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

【讨论】：

【解决方案13】：

我做了另一次尝试来简化这一点，并在不需要容器的情况下实现它。

HTML

<div class="box1">left side of the page</div>
<div class="box2">right side of the page</div>
<div class="box3">center of the page </div>

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

你可以在JSFiddle看到它的直播

【讨论】：

【解决方案14】：

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

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

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

#center {
    margin: 0 auto;
}

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

【讨论】：

【解决方案15】：

你可以试试这个：

你的 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]]

【讨论】：

【解决方案16】：

如果左、中、右 DIV 的宽度不同，您可以按如下方式完成：

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

  #left {
    position: absolute;
    left: 0px;
  }

  #right {
    position: absolute;
    right: 0px;
  }

  #center {
    display: inline-block;
  }

如果您的中心 DIV 是文本，则不需要 #center CSS。

【讨论】：

【解决方案17】：

.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

【讨论】：

欢迎来到 Stack Overflow！请添加一些解释为什么此代码有助于 OP。这将有助于为未来的观众提供一个可以从中学习的答案。请参阅How to Answer 了解更多信息。

【解决方案18】：

你做对了，你只需要清除你的浮动。只需添加

overflow: auto;

到你的容器类。

【讨论】：

【解决方案19】：

最简单的解决方案是创建一个包含 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;
}

【讨论】：

【解决方案20】：

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

【讨论】：

不要只发布一段代码，请解释为什么这段代码可以解决所提出的问题。没有解释，这不是答案。