麻烦让Div居中
[英]Having Trouble Centering a Div
问题描述
I am trying to have my "boxes" div centered on my page so that everything inside of that div acts as it is acting now but centered on my page instead of pushed to the left. 
我试图将我的“框” div放在页面的中心，以便该div内的所有内容均按现在的方式运行，但位于页面的中心，而不是向左推。
Unfortunately, the way I visioned my CSS isn't the way it turned out. 不幸的是，我对CSS的看法并不是事实。
If someone wouldn't mind looking over my jsbin http://jsbin.com/ijifah/1 I'd appreciate it. 如果有人不介意查看我的jsbin http://jsbin.com/ijifah/1，我将不胜感激。
The end-goal is to have the boxes centered on the page. 最终目标是使框在页面上居中。
- Initially I thought I would put all three boxes in a div. 最初，我认为我会将所有三个框放在一个div中。
- After, I would make the boxes. 之后，我要把箱子弄好。
- Lastly, I would center the div "boxes" that contains all three of my boxes. 最后，我将包含所有三个框的div“框”居中。 Unfortunately this isn't working. 不幸的是，这不起作用。
I have been using the 我一直在使用
{display:block;
margin-right: auto;
margin-left: auto;
}
To center a lot of the objects in my CSS. 在我的CSS中集中很多对象。
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: 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>
Thanks for the Help! 谢谢您的帮助！
3 个解决方案
解决方案1
2 已采纳 2013-07-19 13:06:51
Is this good for you: http://jsbin.com/upuwil/1 ? 这对您有好处： http : //jsbin.com/upuwil/1吗？
These two new css properties do the trick: 这两个新的CSS属性可以解决问题：
.boxes {
text-align: center;
width: 100%;
}
解决方案2
0 2013-07-19 13:02:12
To center a div in CSS I use: 要使div在CSS中居中，请使用：
margin:0 auto;
try that 试试看
解决方案3
0
.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.