如何在頁面中心對齊div div

-2

我正在製作一個移動網站&我陷入了一個問題。我有一個主div，裏面有三個div的。之前我想讓它左對齊，但現在我想將這三個div的對齊到頁面的中心。即如果設備的屏幕很寬，它應該到達中心，現在它左對齊。如何在頁面中心對齊div div

我嘗試了很多方法，但無法獲得它。這裏是代碼& css 我知道尺寸應該在em的&而不是像素;我會盡快解決的。

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

來源

2012-01-21 Aditi Nilangekar

可能重複：http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-頁面 – madflow

您可以通過設置邊距屬性在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; 
}

來源

2012-01-21 18:02:28

感謝您的回覆，但它不起作用。對不起，如果我的問題令人困惑，我希望它水平居中對齊。 –

我不知道這怎麼可能不工作......在你的'.main-buttons'的CSS中，添加我在答案中指定的margin屬性，它應該以你想要的方式工作。 –

我已經更新了我的回答一個額外的財產，假設你想要什麼..... –

我得到了解決辦法，我只是不得不添加CSS &的下一行不得不把我的子div的這個div內。由於我不想將寬度添加到我的主父div，因此我添加了一個div &，它給了{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; }

來源

2012-01-27 06:09:53

如何在頁面中心對齊div div

回答

相關問題