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

要将CSS中的div居中使用：

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>

麻烦以一个分组为中心

3 个答案: