Html 在另一个 div 中居中多个 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1308011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center multiple divs in another div?
提问by julienln
I have four divs contained in another div, and I want the four inner divs to be centered.
我有四个 div 包含在另一个 div 中，我希望四个内部 div 居中。
I have used float: lefton the four divs so that they are horizontally aligned.
我float: left在四个 div 上使用过，以便它们水平对齐。
CSS:
CSS：
<style>
.square //inner divs
{
float: left;
margin:1pt;
width:72pt;
height:72pt;
}
.container //outer divs
{
text-align:center;
width:450pt;
height: 80pt;
}
</style>
and HTML:
和 HTML：
<div class = "container">
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
</div>
How can I center the divs inside the container?
如何将容器内的 div 居中？
The number of inner divs can be variable.
内部 div 的数量可以是可变的。
采纳答案by womp
Here's an alternate method if you can use an extra div:
如果您可以使用额外的 div，这是另一种方法：
<div class = "container">
<div class="centerwrapper">
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
</div>
</div>
<style>
.square
{
float: left;
margin:1pt;
width:72pt;
height:72pt;
}
.container
{
text-align:center;
width:450pt;
height: 80pt;
}
.centerwrapper
{
margin: auto;
width: 302pt;
}
</style>
Also, make sure you have a closing quote on your <div class = "container">there. The code you pasted is missing one.
另外，请确保您在<div class = "container">那里有结束语。您粘贴的代码缺少一个。
回答by edi9999
Because you don't know the number of divs you have, you should use
因为你不知道你拥有的 div 数量，你应该使用
text-align:centeron the outer div
text-align:center在外部 div
display:inline-blockon then inner div
display:inline-block然后内部div
http://jsfiddle.net/edi9999/yv2WY/
http://jsfiddle.net/edi9999/yv2WY/
HTML
HTML
<div class = "container">
<div class = "square">John</div>
<div class = "square">Mary</div>
<div class = "square">Doe</div>
<div class = "square">Jane</div>
</div>
CSS
CSS
.square
{
margin:1px;
width:20%;
text-align:left;
border: 1px solid gray;
display:inline-block;
}
.container
{
text-align:center;
width:100%;
height: 80pt;
border: 1px solid black;
}
回答by RwwL
Instead of floating the .square divs, give them display: inline-block.This might be dodgy in Firefox 3.0.x but I believe inline-block is fully supported in 3.5.x.
而不是浮动 .square divs，给它们display: inline-block.这在 Firefox 3.0.x 中可能是狡猾的，但我相信 inline-block 在 3.5.x 中完全支持。
回答by Nestor
As #RwL say, using <span>works, here a sample code, tested on IE6/8, Chrome, Safari, Firefox:
正如#RwL 所说，使用<span>作品，这里是一个示例代码，在 IE6/8、Chrome、Safari、Firefox 上测试：
CSS
CSS
<style type="text/css">
/* borders and width are optional, just added to improve visualization */
.parent
{
text-align:center;
display: block;
border: 1px solid red;
}
.child
{
display: inline-block;
border: 1px solid black;
width: 100px;
}
</style>
HTML
HTML
<span class="parent">
<span class="child">
A
</span>
<span class="child">
B
</span>
</span>
回答by foch
Most elegant solution I could find when you have a dynamic number of div to center is to use
text-align: center;on the parent div, and display: inline-block;on the children.
当您有动态数量的 div 居中时，我能找到的最优雅的解决方案是
text-align: center;在父 div 和子级display: inline-block;上使用。
It's all explained in details here.
这一切都在这里详细解释。
回答by teksatan
Simply place margin:auto;for all subsequent divs inside your main wrapper that is text-align:center;. SHOULD allign all child divs to the center of the parent div i think?
只需将margin:auto;所有后续 div 放在主包装器中，即text-align:center;. 我认为应该将所有子 div 对齐到父 div 的中心吗？
回答by Ashish Rajput
All in one HTML element in auto center
自动中心的多合一 HTML 元素
This code apply all over HTML element in Center without any @mediaquery.
此代码适用于 Center 中的所有 HTML 元素，没有任何 @mediaquery。
- The HTML element auto center main css property display inline-block of the chide div and add css property text-align center of parent div
- HTML元素自动居中主要css属性显示chide div的inline-block并添加css属性 text-align center 父div
.center {
border: 1px groove;
width: 97px;
border-radius: 7px;
padding: 10px;
width: 122px;
margin-left: 12px;
margin-top: 13px;
display: inline-block;
text-decoration: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1.2em;
color: #000000;
background: #dbdbdb;
}
<div style="width: auto;text-align: center;">
<div class="center">Div1</div>
<div class="center">Div2</div>
<div class="center">Div3</div>
<div class="center">Div4</div>
<div class="center">Div5</div>
<div class="center">Div6</div>
<div class="center">Div7</div>
</div>
