同一行上的两个 div 并居中对齐它们答案

【问题标题】：Two Divs on the same row and center align both of them同一行上的两个 div 并居中对齐它们
【发布时间】：2011-10-18 11:13:31
【问题描述】：

我有两个这样的 div

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

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

我希望它们都位于页面的中心，所以我尝试用另一个像这样的 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>

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

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

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

您能否向我建议如何实现这一目标？谢谢。

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

【问题讨论】：

你想让 div1 和 div2 的宽度一样吗？
不，宽度不一样，div 1 会小很多
@Eric 我试图达到同样的效果，但让两个 div 具有相同的宽度，并确保 div 的内容不会超过该宽度。你有什么想法吗？

标签： css html center

【解决方案1】：

你可以这样做

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

用text-align:center; 将其包装在div 中
给内部人员divs 一个display:inline-block; 而不是float

最好也将该 CSS 放入样式表中。

【讨论】：

致否决这个答案的人...我不介意被否决，但你能与我们分享为什么吗？它可以帮助我并帮助其他人了解为什么某些东西不起作用或不合适/
另一种改善外观的方法是通过为内部 div 分配宽度和文本对齐方式。这样，如果您无法分配静态宽度，您可以直接控制同一行中多个元素的定位。例如：<div style="width: 20%; text-align: right; display:inline-block">

【解决方案2】：

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

还有代码：

HTML

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

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

【讨论】：

如果我想将 div 1 和 div 2 居中，我该怎么做？
@knightrider 他们居中.. 你是什么意思？如果要使 div1 和 div2 的内容居中，只需在这两个 div 的 CSS 中添加 text-align: center;。
这是一种不好的做法，因为如果包含 div 的宽度发生变化，或者需要在特定上下文中保持灵活性，它要么会中断，要么需要您重新计算/设置div 的宽度。

【解决方案3】：

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

将宽度设置为两者的 50% 即可。

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

【讨论】：

如果我也想将内部 div 居中，我该怎么做？
@knightrider 将内部 div 居中，您只需为内部 div 添加宽度，并确保外部 div 的宽度足够宽！（边框占用空间！），请查看我制作的这个示例：jsfiddle.net/jackJoe/6kEsT

【解决方案4】：

居中对齐，使用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>

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

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

包装器没有固定宽度，还有其他方法吗？

【解决方案6】：

到目前为止更好的方法：

如果你给 display:inline-block;到内部 div 那么内部 div 的子元素也会得到这个属性并干扰内部 div 的对齐。
更好的方法是为内部 div 使用宽度、边距和浮动两个不同的类。

目前为止最好的方法：

使用弹性盒。

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

【讨论】：

【解决方案7】：

请查看 flex，它会帮助您解决问题，

在主 div 上设置 css display :flex

集合css里面的div：flex:1 1 auto;

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

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

【讨论】：