如何对齐3 div(左/中/右)在另一个div?

小开

最佳答案

使用CSS，像这样放置你的div(浮动优先):

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

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

P.P.S.你通常想要在#container内部最后一个代码段:<div style="clear:both;"></div>，它将垂直扩展#container以包含两侧浮动，而不是仅从#center获取其高度，并可能允许两侧突出底部。

小开

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

小开

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>

for float:left输出将为[First][second][Third]

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

(第一次)(第二次)

(三)

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

小开

如果你不想改变你的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/

小开

以下是当我以图像作为中心元素时，我必须对接受的答案做出的更改:

确保图像被包含在一个div中(在本例中为#center)。如果不是，你必须将display设置为block，它似乎相对于被浮动元素之间的空间居中。

确保设置图像而且其容器的大小:

#center {
margin: 0 auto;
}


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

小开

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

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

其次，将容器的宽度设置为100%就可以了，直到我们谈论到它是整个应用程序的页眉/页脚栏，就像导航或字幕/版权栏一样。在这种情况下使用right: 0;代替。

你使用的是id(哈希#container， #left等)而不是类(.container， .left等)，这很好，除非你想在代码的其他地方重复你的样式模式。我会考虑用类代替。

对于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

萨斯:

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

小开

你已经正确地做了，你只需要清除你的浮动。只需添加

overflow: auto;

到容器类。

小开

最简单的解决方案是用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;
}

小开

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

小开

使用CSS3 Flexbox可以很容易地做到这一点，这个功能将在未来被几乎所有浏览器使用(当<IE9完全死亡时)。

检查浏览器兼容性表 .

超文本标记语言

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

小开

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

小开

使用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的好处:

最少的代码;非常有效的
定心，无论垂直还是水平，都是简单易行的

等高列简单易行
多个选项对齐伸缩元素
这是响应

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

伸缩件对齐方法

__abc0 ~ MDN

Flexbox的完整指南 ~ css技巧
什么Flexbox?! ~ YouTube视频教程

浏览器支持:< em > < / em > 所有主流浏览器都支持Flexbox，除了IE <10 < / >。一些最新的浏览器版本，如Safari 8和IE10，要求供应商前缀。要快速添加前缀，请使用这个答案。

小开

你可以试试这个:

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

小开

.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 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现场看到它

小开

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

超文本标记语言

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

< a href = " http://codepen。io/anon/pen/jrdwNW" rel="nofollow">Code pen Link . io/anon/pen/jrdwNW" rel="nofollow">Code pen Link

小开

有一些技巧可以用于对齐元素。

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. 使用弹性技巧

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

小开

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

< a href = " https://codepen。/a> . io/mortal /pen/PEWzMJ" rel="nofollow noreferrer">CodePen . io/mortal /pen/PEWzMJ" rel="nofollow noreferrer

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

< a href = " https://codepen。io/mortal /pen/RxKGxx" rel="nofollow noreferrer">CopePen . .

小开

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>

小开

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

小开

使用CSS网格

layout {
display: grid;
grid-template-columns: repeat(3,1fr);
}
start-column {
justify-self: start;
}
center-column {
justify-self: center;
}
end-column {
justify-self: end;
}

<layout>
<start-column>
<button>Start</button>
</start-column>
<center-column>
<p>Center Donec non urna ipsum. Nullam euismod, lacus ac malesuada varius, mauris erat ullamcorper erat, eget dignissim tortor felis et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi faucibus turpis et augue dapibus bibendum.</p>
</center-column>
<end-column>
<a href="#">End</a>
</end-column>
</layout>