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

js小提琴

justify-content属性有五个值:

flex-start(默认) flex-end 中心 之间的空间 空间

在所有情况下，三个div都在同一行上。有关每个值的描述，请参见:https://stackoverflow.com/a/33856609/3597276

flexbox的好处:

最少的代码;非常有效的 对中，无论是垂直还是水平，都是简单易行的 等高列简单易行 调整伸缩元素的多个选项 这是响应 与浮动和桌子不同，它们提供的布局容量有限，因为它们从未用于建筑布局， flexbox是一种现代(CSS3)技术，具有广泛的选项。

欲了解更多关于flexbox的信息，请访问:

调整伸缩项目的方法 使用CSS灵活的盒子~ MDN Flexbox ~ CSS-Tricks的完整指南 什么Flexbox?!~ YouTube视频教程

浏览器支持:除IE < 10外，所有主流浏览器都支持Flexbox。一些最新版本的浏览器，如Safari 8和IE10，需要使用厂商前缀。要快速添加前缀，请使用Autoprefixer。更多细节在这个答案中。

CSS网格可以轻松完成工作:

#{容器 显示:网格;/*(1)一个网格容器*/ grid-auto-flow:列;/*(2)列布局*/ justify-content:之间的空间;/*(3)对齐列*/ 背景颜色:浅黄色; ｝ #容器> div { 宽度:100 px; 身高:100 px; 边框:2px红色虚线; ｝ < div id = "容器" > < div > < / div > < div > < / div > < div > < / div > < / div >

.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

如果左边、中间和右边的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。

你可以试试这个:

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

我喜欢我的杠铃紧而有活力。这是css3和HTML 5

First, setting the Width to 100px is limiting. Don't do it. Second, setting the container's width to 100% will work ok, until were talking about it being a header/footer bar for the whole app, like a navigation or credits/copyright bar. Use right: 0; instead for that scenario. You are using id's (hash #container, #left, etc) instead of classes (.container, .left, etc), which is fine, unless you want to repeat your style pattern elsewhere in your code. I'd consider using classes instead. For HTML, no need to swap order for: left, center, & right. display: inline-block; fixes this, returning your code to something cleaner and logically in order again. Lastly, you need to clear the floats all up so that it doesn't mess with future <div>. You do this with the 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

萨斯:

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