我在另一个div中包含四个div,并且我希望四个内部div居中。
我在四个div上使用了float: left
,因此它们在水平方向上对齐。
CSS:
<style>
.square //inner divs
{
float: left;
margin:1pt;
width:72pt;
height:72pt;
}
.container //outer divs
{
text-align:center;
width:450pt;
height: 80pt;
}
</style>
和HTML:
<div class = "container">
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
<div class = "square">...</div>
</div>
如何将div放在容器内部居中?
内部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>
此外,请确保在<div class = "container">
上有一个引号。您粘贴的代码缺少一个。
由于您不知道所具有的div数,应使用
外部div上的text-align:center
display:inline-block
然后在内部div
http://jsfiddle.net/edi9999/yv2WY/
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
.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;
}
而不是浮动.square div,而是给它们display: inline-block.
在Firefox 3.0.x中这可能是狡猾的,但我认为3.5.x中完全支持inline-block。
正如#RwL所说,使用<span>
可行,这里是示例代码,已在IE6 / 8,Chrome,Safari,Firefox上测试过:
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
<span class="parent">
<span class="child">
A
</span>
<span class="child">
B
</span>
</span>
当您将div的动态数设为中心时,我可以找到的最优雅的解决方案是父div上的text-align: center;
,子div上的display: inline-block;
。
全部详细说明here。
将所有后续div只需将margin:auto;
放置在主包装即text-align:center;
中。我应该将所有子div分配到父div的中心吗?
此代码适用于Center中的所有HTML元素,而没有任何@mediaquery。
.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>