麻烦让Div居中

Question

我试图将我的“框” 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>

谢谢您的帮助！

Answer 1

这对您有好处： http : //jsbin.com/upuwil/1吗？
这两个新的CSS属性可以解决问题：

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

Answer 2

要使div在CSS中居中，请使用：

margin:0 auto;

试试看

Answer 3

.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>

麻烦让Div居中

问题描述

3 个解决方案

解决方案1
2 已采纳 2013-07-19 13:06:51

解决方案2
0 2013-07-19 13:02:12

解决方案3
0

麻烦让Div居中

问题描述

3 个解决方案

解决方案1 2 已采纳 2013-07-19 13:06:51

解决方案2 0 2013-07-19 13:02:12

解决方案3 0

解决方案1
2 已采纳 2013-07-19 13:06:51

解决方案2
0 2013-07-19 13:02:12

解决方案3
0