[英]Having Trouble Centering a Div
我試圖將我的“框” div放在頁面的中心,以便該div內的所有內容均按現在的方式運行,但位於頁面的中心,而不是向左推。
不幸的是,我對CSS的看法並不是事實。
如果有人不介意查看我的jsbin http://jsbin.com/ijifah/1,我將不勝感激。
最終目標是使框在頁面上居中。
我一直在使用
{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>
謝謝您的幫助!
這對您有好處: http : //jsbin.com/upuwil/1嗎?
這兩個新的CSS屬性可以解決問題:
.boxes {
text-align: center;
width: 100%;
}
要使div在CSS中居中,請使用:
margin:0 auto;
試試看
.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.