1

我试图让我的“盒子” 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>

谢谢您的帮助！

4

3 回答 3

2

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

.boxes  {
  text-align: center;
  width: 100%;
}
于 2013-07-19T13:06:51.060 回答
0

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

margin:0 auto;

试试看

于 2013-07-19T13:02:12.107 回答
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>
于 2013-07-19T13:04:23.387 回答