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

392

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

有小费吗？

html  css  flexbox  alignment  css-float 
— 塞格
source
1
如果容器的宽度变得小于300px，除非您设置溢出属性，否则这种情况将会发生。
— inkedmn
Flexbox以及Grid：jsfiddle.net/w0s4xmc0/12963
— Manoj Kumar，
只是要注意-根据@inkedmn的评论，每列中都有很多内容，我无法让它们全部以任何容器宽度正确对齐，而无需overflow: hidden;在该center列上对齐。然后在媒体查询小型设备时，当我将所有三列都放在页面的顶部居中时，我需要overflow: hidden;在中间行（大型设备上的右列），否则它没有高度并且没有垂直居中在顶部和底部之间。
— 克里斯·L

Answers:

364

使用该CSS，将您的div放置为这样（浮点数优先）：

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

PS您也可以向右浮动，然后向左浮动，然后居中。重要的是浮子位于“主”中心部分之前。

PPS您通常希望在#container此代码片段的最后：该代码片段<div style="clear:both;"></div>将#container垂直延伸以包含两个侧面浮标，而不是仅从#center其底部占据高度，并可能使侧面从底部突出。

— 德卡明斯
source
如果容器不是100％，您将如何处理？我在这里尝试类似的操作，我希望div确实位于容器的右侧，但它浮动在页面的右侧
— Tiago 2010年
@Tiago：如果它们位于div中，则它们应保持在div中。通过将其设置为来检查容器的宽度border:solid。如果是100％，则将其围成另一个div，以将其放置在页面内。
— James P.
另外-如果要将它们放在可调整大小的容器中，请确保设置容器的最小宽度，以防止将右浮动div推下。
— Tapefreak，2012年
6
这个答案已经超过六年了。在2016年，正确的答案是flexbox。
1
@torazaburo，也许有一个以上的正确答案，有很多方法可以达到同一点，在这种情况下，我必须使用此解决方案，因为我使用的框架已经设置了元素的float和left左右在最后添加中心元素对我来说很完美。
— Ninja Coding's
128

如果您不想更改HTML结构，也可以通过添加text-align: center;到wrapper元素和a 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/

— fruechtemuesli
source
1
这是唯一可以根据窗口宽度正确调整大小而又不会过早折叠的解决方案。
— 贾里德·希利
2
当左右尺寸相等时，这是完美的选择。否则，中心将不居中。
— mortalis
126

使用Flexbox水平对齐三个Divs

这是一个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的优点：

  1. 最少的代码；非常有效率
  2. 垂直和水平居中，简单易行
  3. 等高的列既简单又容易
  4. 对齐弹性元素的多个选项
  5. 反应灵敏
  6. 与花车和桌子不同，因为它们从来没有用于建筑布局，而浮动和桌子却提供有限的布局功能，而flexbox是一种现代（CSS3）技术，具有多种选择。

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

浏览器支持： 除IE <10以外，所有主要浏览器均支持 Flexbox 。某些最新的浏览器版本（例如Safari 8和IE10）需要供应商前缀。要快速添加前缀，请使用Autoprefixer。此答案中有更多详细信息。

— 迈克尔·本杰明
source
7
Flex比使用浮点数好得多。
— Faizan Akram Dar
1
在这里和链接的帖子中有很好的解释！ 旁注：在容器div中使用“ span”元素作为flex项目在firefox中有效，但在基于javafx的浏览器（webview）中无效。将“ spans”更改为“ divs”都可以。
— Ashok
Internet Explorer 10和更早版本不支持justify-content属性
— D.Snap
1
不幸的是，这仅适用于相同宽度的项目。另请参阅stackoverflow.com/questions/32551291/...
— 手柄
太好了，我在这里尝试了所有解决方案，这是最好的解决方案！
— NicoMüller
22

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 => left属性会将您的下一个元素添加到上一个元素的左边，与right的大小写相同

另外，您还必须考虑父元素的宽度，如果子元素的宽度之和超过父元素的宽度，则下一个元素将添加到下一行

 <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>
展开摘要

[第一秒]

[第三]

因此，您需要考虑所有这些方面以获得完美的结果

— 拉吉夫·平格勒
source
13

我喜欢我的杠铃紧凑而充满活力。这是针对CSS 3和HTML 5的

  1. 首先，将“宽度”设置为100px是有限制的。不要这样

  2. 其次，将容器的宽度设置为100％可以正常工作，直到谈论它是整个应用程序的页眉/页脚栏，例如导航栏或信用/版权栏。使用right: 0;，而不是针对该方案。

  3. 您可以使用id（哈希#container，#left等）代替类（.container，.left等），这很好，除非您想在代码中的其他地方重复样式模式。我会考虑改用类。

  4. 对于HTML，无需将顺序交换为：左，中和右。display: inline-block;解决此问题，将您的代码返回到更整洁且逻辑上又有序的位置。

  5. 最后，您需要清除所有浮标，以免与future混淆<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; }
}
— 埃里克·旺奇奇
source
12

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

01.使用表格技巧

显示代码段

02.使用Flex Trick

显示代码段

03.使用浮动技巧

显示代码段

— Santosh Khalse
source
11

使用CSS3 Flexbox可以轻松完成此操作，该功能将在以后使用（当 <IE9几乎所有浏览器中完全消失时）。

查看浏览器兼容性表

的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 */
}

输出：

显示代码段

— 马诺·库玛（Manoj Kumar）
source
4

使用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>
— K a。
source
3

可能的答案，如果您想保留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%);
}

密码笔链接

— 普鲁特维
source
2

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演示

— 哈立德·法汉（Khalid Farhan）
source
它仅在示例中使div居中，因为文本元素的大小几乎相同，使文本变长，并且#center div不再位于中心：jsfiddle.net/3a4Lx239
— Kai Noack
1

我做了另一种尝试，以简化此过程并在不需要容器的情况下实现它。

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

您可以在JSFiddle上实时查看

— 用户名
source
1

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

密码笔

为了创建没有库的结构，我从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;
}

应付笔

— 凡人
source
0

这是当我以图像为中心元素时必须对接受的答案进行的更改：

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

  2. 请务必设置图像两者的大小和它的容器：

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
— 山姆
source
0

您可以尝试以下方法：

您的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]]
— 基山拉达迪亚
source
-1 
.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
— 舒巴姆
source
2
欢迎使用Stack Overflow！请添加一些解释，说明此代码为何有助于OP。这将为将来的观众提供借鉴。有关更多信息，请参见如何回答。
— 异端猴子
-3

您已正确完成操作，只需要清除浮动即可。只需添加 

overflow: auto;

到您的容器类。

— Mustapha ZEGAOULA
source
-6

最简单的解决方案是创建一个包含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;
}
— Sthembiso F. Makhathini
source
-10 
#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 }
— 个字节
source
2
而不是仅发布代码块，请解释为什么此代码解决了所提出的问题。没有解释，这不是答案。
— 马丁·彼得斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.