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

Question

提问by serg

I want to have 3 divs aligned inside a container div, something like this:

我想让 3 个 div 在容器 div 内对齐，如下所示：

[[LEFT]       [CENTER]        [RIGHT]]

Container div is 100% wide (no set width), and center div should remain in center after resizing the container.

容器 div 为 100% 宽（未设置宽度），调整容器大小后，中心 div 应保持在中心。

So I set:

所以我设置：

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

But it becomes:

但它变成了：

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Any tips?

有小费吗？

Answer 1

采纳答案by dkamins

With that CSS, put your divs like so (floats first):

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

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

P.S.You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.

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

P.P.S.You often want last inside #containerthis snippet: <div style="clear:both;"></div>which will extend #containervertically to contain both side floats instead of taking its height only from #centerand possibly allowing the sides to protrude out the bottom.

PPS您通常希望在#container此代码段中使用last ：<div style="clear:both;"></div>它将#container垂直延伸以包含两个侧面浮动，而不是仅从#center底部获取高度，并且可能允许侧面突出底部。

Answer 2

回答by fruechtemuesli

If you do not want to change your HTML structure you can also do by adding text-align: center;to the wrapper element and a display: inline-block;to the centered element.

如果你不想改变你的 HTML 结构，你也可以通过添加text-align: center;到包装器元素和 adisplay: 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;
}

Live Demo: http://jsfiddle.net/CH9K8/

现场演示：http: //jsfiddle.net/CH9K8/

Answer 3

回答by Michael Benjamin

Aligning Three Divs Horizontally Using Flexbox

使用 Flexbox 水平对齐三个 Div

Here is a CSS3 method for aligning divs horizontally inside another div.

这是用于在另一个 div 内水平对齐 div 的 CSS3 方法。

#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

js小提琴

The justify-contentproperty takes five values:

该justify-content属性有五个值：

flex-start(default)
flex-end
center
space-between
space-around

flex-start（默认）
flex-end
center
space-between
space-around

In all cases, the three divs are on the same line. For a description of each value see: https://stackoverflow.com/a/33856609/3597276

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

Benefits of flexbox:

弹性盒的好处：

minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

最少的代码；非常有效率
垂直和水平居中，简单易行
等高列简单易行
用于对齐 flex 元素的多个选项
它是响应式的
与浮动和表格不同，它们提供有限的布局容量，因为它们从来没有用于构建布局，flexbox 是一种现代 (CSS3) 技术，具有广泛的选项。

To learn more about flexbox visit:

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

Methods for Aligning Flex Items
Using CSS flexible boxes~ MDN
A Complete Guide to Flexbox~ CSS-Tricks
What the Flexbox?!~ YouTube video tutorial

Browser support:Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.

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

Answer 4

回答by Rajiv Pingale

Float property is actually not used to align the text.

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

This property is used to add element to either right or left or center.

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

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:leftoutput will be [First][second][Third]

对于float:left输出将是[First][second][Third]

for float:rightoutput will be [Third][Second][First]

对于float:right输出将是[Third][Second][First]

That means float => left property will add your next element to left of previous one, Same case with right

这意味着 float => left 属性会将您的下一个元素添加到前一个元素的左侧，与右侧的情况相同

Also you have to Consider the width of parent element, if the sum of widths of child elements exceed the width of parent element then the next element will be added at next line

另外你必须考虑父元素的宽度，如果子元素的宽度总和超过父元素的宽度，那么下一个元素将在下一行添加

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

[First] [Second]

[第一秒]

[Third]

[第三]

So you need to Consider All these aspect to get the perfect result

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

Answer 5

回答by Eric Wanchic

I like my bars tight and dynamic. This is for CSS 3 & HTML 5

我喜欢我的酒吧紧凑而充满活力。这适用于 CSS 3 和 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;

首先，将宽度设置为 100px 是有限制的。不要这样做。
其次，将容器的宽度设置为 100% 会正常工作，直到将其作为整个应用程序的页眉/页脚栏，如导航或署名/版权栏。使用right: 0;，而不是针对该方案。
您正在使用 id 的（hash #container、#left等）而不是类（.container、.left等），这很好，除非您想在代码的其他地方重复您的样式模式。我会考虑使用类。
对于 HTML，无需交换以下顺序：左、中、右。display: inline-block;修复了这个问题，将您的代码返回到更清晰、更符合逻辑的顺序。
最后，您需要清除所有浮点数，以免与 future 混淆<div>。你用clear: both;

To summarize:

总结一下：

HTML:

HTML：

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

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

Bonus point if using HAML and SASS ;)

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

Answer 6

回答by Santosh Khalse

There are several tricks available for aligning the elements.

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

01. Using Table Trick

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. Using Flex Trick

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. Using Float Trick

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>

Answer 7

回答by Manoj Kumar

This can be easily done using the CSS3 Flexbox, a feature which will be used in the future(When <IE9is completely dead) by almost every browser.

这可以使用 CSS3 Flexbox 轻松完成，该功能将在未来（何时<IE9完全失效）被几乎所有浏览器使用。

Check the 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 */
}

Output:

输出：

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

Answer 8

回答by Ka.

With twitter bootstrap :

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

Answer 9

回答by Pruthvi P

possible answer, if you want to keep the order of the html and not use flex.

可能的答案，如果你想保持 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

代码笔链接

Answer 10

回答by Khalid Farhan

HTML:

HTML：

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS:

CSS：

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center;gives perfect centre align.

text-align:center;提供完美的中心对齐。

JSFiddle Demo

JSFiddle 演示

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

提问by serg

采纳答案by dkamins

回答by fruechtemuesli

回答by Michael Benjamin

Aligning Three Divs Horizontally Using Flexbox

使用 Flexbox 水平对齐三个 Div

jsFiddle

js小提琴

回答by Rajiv Pingale

回答by Eric Wanchic

回答by Santosh Khalse

回答by Manoj Kumar

回答by Ka.

回答by Pruthvi P

回答by Khalid Farhan

相关推荐

最近更新

标签

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

提问by serg

采纳答案by dkamins

回答by fruechtemuesli

回答by Michael Benjamin

Aligning Three Divs Horizontally Using Flexbox

使用 Flexbox 水平对齐三个 Div

jsFiddle

js小提琴

回答by Rajiv Pingale

回答by Eric Wanchic

回答by Santosh Khalse

回答by Manoj Kumar

回答by Ka.

回答by Pruthvi P

回答by Khalid Farhan

相关推荐

Html 仅使用视频标签实时流式传输到 HTML5（没有 webrtc）

Html 使输入字段看起来像引导程序 3 中的表格单元格

我可以在 <textarea> 标签中嵌入 HTML 格式吗？

Html 图像扩展大于父 div

相关推荐

最近更新

标签