麻煩居中Div

我想讓我的「盒子」div集中在我的頁面上，以便該div內的所有內容都起作用，因爲它現在正在執行，但是集中在我的頁面上而不是被推到左側。麻煩居中Div

不幸的是，我對CSS的看法並非如此。

如果有人不介意看我的jsbin http://jsbin.com/ijifah/1我會很感激。

最終目標是將框放在頁面的中心位置。

最初我以爲我會把所有三個盒子放在一個div中。
之後，我會製作盒子。
最後，我會將包含我所有三個框的div「框」居中。不幸的是，這是行不通的。

我一直在使用

{display:block; 
    margin-right: auto; 
    margin-left: auto; 
    }

要居中很多對象在我的CSS。

CSS：

.boxes { 
    display: inline-block; 
    margin-right: auto; 
    margin-left: auto; 
    position: absolute; 
} 
.basecamp { 
    width: 160px; 
    height: 217px; 
    border: 1px solid #E8E8E8; 
    padding: 20px 10px 10px 10px; 
    font-family: Lucida Grande; 
    background: linear-gradient(#FFFFFF,#F0F0F0); 
    border-radius: 5px; 
    position: relative; 
    display: inline-block; 
    margin-right: auto; 
    margin: 0 20px; 
} 

.logos { 
    position: relative; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    margin-bottom: 10px; 
} 

.basecamp a { 
    position: relative; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    font-size: 21px; 
    color: #3366A7; 
    text-align: center; 
    font-weight: bold; 
    font-family: Lucida Grande; 
    margin-bottom: -10px; 
} 

.logo-headers { 
    color:#CC0000; 
    text-align: center; 
    position: relative; 
    font-size: 14px; 
    font-family: Lucida Grande; 
} 

    .logo-p { 
position: relative; 
text-align: center; 
font-family: Lucida Grande; 
font-size: 14px; 
margin-top: -10px; 
}

HTML：

<body> 
    <div class="boxes"> 
    <div class="basecamp"> 
     <img src="images/logo-bc.png" alt="logo" class="logos"> 
     <a href="#">Basecamp</a> 
     <h5 class="logo-headers">Manage Projects</h5> 
     <p class="logo-p">Used by millions for project management.</p> 
    </div> 
    <div class="basecamp"> 
     <img src="images/logo-bc.png" alt="logo" class="logos"> 
     <a href="#">Basecamp</a> 
     <h5 class="logo-headers">Manage Projects</h5> 
     <p class="logo-p">Used by millions for project management.</p> 
    </div> 
    <div class="basecamp"> 
     <img src="images/logo-bc.png" alt="logo" class="logos"> 
     <a href="#">Basecamp</a> 
     <h5 class="logo-headers">Manage Projects</h5> 
     <p class="logo-p">Used by millions for project management.</p> 
    </div> 
</div> 


</body>

感謝您的幫助！

來源

2013-07-19 HelloWorld

這是對你有好處：http://jsbin.com/upuwil/1？
這兩個新的CSS屬性做的伎倆：

.boxes { 
    text-align: center; 
    width: 100%; 
}

來源

2013-07-19 13:06:51 Cherniv

您的鏈接不起作用 –

@ChrisLaarman和OP的工作？：http://jsbin.com/ijifah/1 – Cherniv

沒關係......猜某種打嗝 –

要居中在CSS一個div我用：

margin:0 auto;

嘗試

來源

2013-07-19 13:02:12 JohnnyFaldo

.boxes { 
    position: relative; 
    display:inline-block; 
} 
<center> 
<div class="boxes"> 
    <div class="basecamp"> 
     <img src="images/logo-bc.png" alt="logo" class="logos"> 
     <a href="#">Basecamp</a> 
     <h5 class="logo-headers">Manage Projects</h5> 
     <p class="logo-p">Used by millions for project management.</p> 
    </div> 
    <div class="basecamp"> 
     <img src="images/logo-bc.png" alt="logo" class="logos"> 
     <a href="#">Basecamp</a> 
     <h5 class="logo-headers">Manage Projects</h5> 
     <p class="logo-p">Used by millions for project management.</p> 
    </div> 
    <div class="basecamp"> 
     <img src="images/logo-bc.png" alt="logo" class="logos"> 
     <a href="#">Basecamp</a> 
     <h5 class="logo-headers">Manage Projects</h5> 
     <p class="logo-p">Used by millions for project management.</p> 
    </div> 
    </div> 
</center>

來源

2013-07-19 13:04:23

回答

相關問題