Html 同一行的两个 Div 并居中对齐它们

Two Divs on the same row and center align both of them

提问by knightrider

I have two divs like this

我有两个这样的 div

<div style="border:1px solid #000; float:left">Div 1</div>
<div style="border:1px solid red; float:left">Div 2</div>

I want them to display on the same row, so I used float:left.

我希望它们显示在同一行上，所以我使用了float:left.

I want both of them to be at center of the page as well, so I tried to wrap them with another div like this

我希望它们都位于页面的中心，所以我试图用另一个像这样的 div 包装它们

<div style="width:100%; margin:0px auto;">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

But it doesn't work. If I change the code to this

但它不起作用。如果我将代码更改为此

<div style="width:100%; margin-left:50%; margin-right:50%">
  <div style="border:1px solid #000; float:left">Div 1</div>
  <div style="border:1px solid red; float:left">Div 2</div>
</div>

then it's going to the center, but the horizontal scrollbar is there and it seems like it's not really centered as well.

然后它会到中心，但水平滚动条在那里，它似乎也没有真正居中。

Can you please kindly suggest to me how can I achieve this? Thanks.

你能否请你给我建议我怎样才能做到这一点？谢谢。

Edit: I want the inner div (Div 1 and Div 2) to be center align as well.

编辑：我希望内部 div（Div 1 和 Div 2）也居中对齐。

回答by Jason Gennaro

You could do this

你可以这样做

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>  

http://jsfiddle.net/jasongennaro/MZrym/

http://jsfiddle.net/jasongennaro/MZrym/

1. wrap it in a divwith text-align:center;
2. give the innder divs a display:inline-block;instead of a float

1. 将它包裹在一个divwithtext-align:center;
2. 给 innder divsadisplay:inline-block;而不是 afloat

Best also to put that css in a stylesheet.

最好也将该 css 放在样式表中。

回答by Jules

Could this do for you? Check my JSFiddle

这对你有用吗？检查我的JSFiddle

And the code:

和代码：

HTML

HTML

<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
</div>

CSS

CSS

div.container {
    background-color: #FF0000;
    margin: auto;   
    width: 304px;
}

div.div1 {
    border: 1px solid #000;
    float: left;
    width: 150px;
}

div.div2 {
    border: 1px solid red;
    float: left;
    width: 150px;
}

回答by Vignesh Raja

Align to the center, using display: inline-blockand text-align: center.

使用display: inline-block和对齐中心text-align: center。

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    margin: 0 auto;
    text-align: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
    display: inline-block;
}

<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Align to the center using display: flexand justify-content: center

使用display: flex和对齐中心justify-content: center

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}

<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

Align to the center vertically and horizontally using display: flex, justify-content: centerand align-items:center.

使用display: flex,justify-content: center和垂直和水平对齐中心align-items:center。

.outerdiv
{
    height:100px;
    width:500px;
    background: red;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
}

.innerdiv
{
    height:40px;
    width: 100px;
    margin: 2px;
    box-sizing: border-box;
    background: green;
}

<div class="outerdiv">
    <div class="innerdiv"></div>
    <div class="innerdiv"></div>
</div>

回答by HymanJoe

both floated divs need to have a width!

两个浮动的 div 都需要有一个宽度！

set 50% of width to both and it works.

将 50% 的宽度设置为两者，它可以工作。

BTW, the outer div, with its margin: 0 autowill only center itself not the ones inside.

顺便说一句，外部 div，margin: 0 auto它只会将自己居中而不是内部的div 。

回答by brezanac

I would vote against display: inline-blocksince its not supported across browsers, IE < 8 specifically.

我会投反对票，display: inline-block因为它不受浏览器支持，特别是 IE < 8。

.wrapper {
    width:500px; /* Adjust to a total width of both .left and .right */
    margin: 0 auto;
}
.left {
    float: left;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #000;
}
.right {
    float: right;
    width: 49%; /* Not 50% because of 1px border. */
    border: 1px solid #F00;
}

<div class="wrapper">
    <div class="left">Div 1</div>
    <div class="right">Div 2</div>
</div>

EDIT:If no spacing between the cells is desired just change both .leftand .rightto use float: left;

编辑：如果不需要单元格之间的间距，只需更改两者.left并.right使用float: left;

回答by Gohar ul Islam

Better way till now:

到目前为止更好的方法：

1. If you give display:inline-block; to inner divs then child elements of inner divs will also get this property and disturb alignment of inner divs.

2. Better way is to use two different classes for inner divs with width, margin and float.

1. 如果你给 display:inline-block; 到内部 div 然后内部 div 的子元素也将获得此属性并干扰内部 div 的对齐。

2. 更好的方法是对具有宽度、边距和浮动的内部 div 使用两个不同的类。

Best way till now:

迄今为止最好的方法：

Use flexbox.

使用弹性盒。

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

回答by hod caspi

Please take a look on flexit will help you make things right,

请看一下flex，它会帮助你把事情做好，

on the main div set css display :flex

在主 div 上设置 css display :flex

the div's that inside set css: flex:1 1 auto;

div 是里面设置的 css： flex:1 1 auto;

attached jsfiddle link as example enjoy :)

附上 jsfiddle 链接作为示例享受:)

https://jsfiddle.net/hodca/v1uLsxbg/

https://jsfiddle.net/hodca/v1uLsxbg/