这是一个链接:http://jsfiddle.net/zCXMv/18/
我不知道如何让它工作。请帮忙。
HTML:
<div id="button" >
<a class="button1 active" rel="1"></a>
<a class="button2" rel="2"></a>
<a class="button3" rel="3"></a>
<a class="button4" rel="4"></a>
</div>
CSS:
.button1,
.button2,
.button3,
.button4 {
background:#999;
padding:6px;
display:block;
float:left;
margin-right:5px;
}
#button {
width: 50%;
border-width: 1px;
border-style: solid;
height: 30px;
margin-left: auto;
margin-right: auto;
}
最佳答案
我制作了按钮 display: inline-block
,删除了 float
并添加了 text-align: center
到父元素。
.button1,
.button2,
.button3,
.button4
{
background:#999;
padding:6px;
display: inline-block; // Changed from "block"
margin-right:5px;
// Removed floats
}
#button
{
width: 50%;
border-width: 1px;
border-style: solid;
height: 30px;
margin-left: auto;
margin-right: auto;
text-align: center; // Added central alignment to content
}
<div id="button" >
<a class="button1 active" rel="1"></a>
<a class="button2" rel="2"></a>
<a class="button3" rel="3"></a>
<a class="button4" rel="4"></a>
</div>
关于html - 如何将此 div 中的内容居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25961242/