Question

我正在制作一个移动网站＆amp;我陷入了困境。我有一个主div，里面有三个div。之前我希望它保持对齐但现在我想将这三个div对齐到页面的中心。即如果设备的屏幕很宽，它应该到达中心，现在它就是左对齐。

我尝试了很多方法但却无法得到它。这是代码＆amp; CSS 我知道尺寸应该在em＆amp;不是像素;我很快就会解决这个问题。

<div class="main-buttons">
<div class="box1"><a href="#"></a></div>
<div class="box2"><a href="#"></a></div>
<div class="box3"><a href="#"></a></div>
</div><!-- MAIN BUTTONS ENDS HERE -->


.main-buttons{ height:42px; padding:5px 10px 5px 10px; background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;}

.box1 a { background-image:url(images/box1.jpg); height:42px; margin-right:6px; width:65px; }
.box2 a { background-image:url(images/box2.jpg); height:42px; margin-right:6px; width:65px; }
.box3 a { background-image:url(images/box2.jpg); height:42px; width:65px; }

Answer 1

您可以通过设置margin属性在CSS中实现此目的。

对于父div，使用以下css，它应该可以正常工作

.main-contents
{
    margin: 10px auto; 
    height:42px; 
    padding:5px 10px 5px 10px; 
    background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;
    overflow: hidden;
}

.box1, .box2, .box3
{
    float:left;
}

Answer 2

我得到了解决方案，我只需添加一行css＆amp;不得不把我的子div放在这个div中。因为我不想为我的主父div添加宽度，所以我又添加了一个div＆amp;给了{margin:0 auto;}。我不知道这种方法是否正确，但它解决了我的问题。

<div class="main-buttons">
<div class="sub-buttons">
<div class="box1"><a href="#"></a></div>
<div class="box2"><a href="#"></a></div>
<div class="box3"><a href="#"></a></div>
</div><!-- SUB DIV ENDS HERE -->
</div><!-- MAIN BUTTONS ENDS HERE -->

CSS：

.main-buttons{ height:42px; padding:5px 10px 5px 10px; background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;}
.sub-buttons{ width:202px; height:42px; margin:0 auto;}

.box1 a { background-image:url(images/box1.jpg); height:42px; margin-right:6px; width:65px; }
.box2 a { background-image:url(images/box2.jpg); height:42px; margin-right:6px; width:65px; }
.box3 a { background-image:url(images/box2.jpg); height:42px; width:65px; }

如何在页面中心对齐div

2 个答案: