我试图让我的“框”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>
感谢您的帮助!
最佳答案
这对你有好处吗:http://jsbin.com/upuwil/1 ？
这两个新的 css 属性可以解决问题:
.boxes {
text-align: center;
width: 100%;
}
关于html - 无法将 Div 居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17746650/