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

HTML CSS

猴子阳光

2020-03-19

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

有小费吗？

第2422篇《如何在另一个div内对齐3个div（左/中/右）？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共17个回答
神乐Itachi 2020.03.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 }
小胖蛋蛋前端 2020.03.19

The easiest solution is to crate a table with 3 columns and center that table.

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;
}
Near路易 2020.03.19

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

overflow: auto;

到您的容器类。

AJinJin乐 2020.03.19 
.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
米亚凯 2020.03.19

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

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

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

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
阳光Stafan 2020.03.19

您可以尝试以下方法：

您的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]]
LA 2020.03.19

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

应付笔

乐米亚 2020.03.19

我做了另一种尝试来简化此过程，并且不需要容器就可以实现它。

的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上实时查看

泡芙逆天 2020.03.19

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

密码笔链接

村村神无猴子 2020.03.19

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

LLEY 2020.03.19

可以使用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 */
}

输出： 

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

卡卡西乐逆天 2020.03.19

使用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>
神无西里 2020.03.19

我喜欢我的杠铃紧凑而充满活力。这是针对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; }
}
卡卡西小卤蛋GO 2020.03.19

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

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 Trick

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

Harry猪猪 2020.03.19

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>

[第一秒]

[第三]

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

神奇逆天猪猪 2020.03.19

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

西门泡芙Jim 2020.03.19

使用该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其底部开始占据高度，并可能使侧面从底部突出。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android