1

我想在页面中心创建大按钮样式的 div，并且在大多数情况下，它正在工作。唯一的问题是我希望它们之间有一些空间，但我似乎无法让它发挥作用。下面是我的CSS。我所做的是创建 1 个名为 Wrapper 的 div，然后在里面再创建 2 个 div，一个称为 topleft，另一个是 topright。在这个阶段，只有这 2 个 div，但是（以及内部 div 被称为顶部的原因）我可能想在同一行或稍后的下一行添加其他 div。

我一直在阅读保证金是这样做的方法，但它不适用于我现有的代码。是因为我已经在 WRAPPER 中使用它以使它们居中吗？我在让它按照我想要的方式对齐时遇到了一些麻烦，它看起来确实像我想要的那样，但我怀疑我的问题是因为如果这有意义的话，我可能会错误地将它们居中和对齐？

基本上，我的问题是如何在 topleft 和 topright 之间获得一些空间？

.wrapper {
    margin: 0 auto;
    width:600px;
}
.topleft {
    height: 200px;
    width: 300px;
    vertical-align: middle;
    display: table-cell;
    border-radius: 15px;
    background-color: rgb(0,178,219);
}
.topright {
    height: 200px;
    width: 300px;
    vertical-align: middle;
    display: table-cell;
    border-radius: 15px;
    background-color: rgb(134,197,73);
}

我的 HTML 很简单：

<div class="wrapper">
  <div class="topleft"> <a href="energy.html">ENERGY</a> </div>
  <div class="topright"> <a href="minerals.html">MINERALS</a> </div>
</div>
4

2 回答 2

2

看看这个 jsfiddle

http://jsfiddle.net/peter/YmKc4/

更新的 CSS

.wrapper {
    margin: 0 auto;
    width:600px;
}
.topleft {
    height: 200px;
    width: 280px;
    border-radius: 15px;
    background-color: rgb(0,178,219);
    float:left;
    line-height:200px;
    margin:0 5px 0;
}
.topright {
    height: 200px;
    width: 280px;
    border-radius: 15px;
    background-color: rgb(134,197,73);
    float:left;
    line-height:200px;
    margin:0 5px 0;
}​

当您将 a 设置line-height为与 div 相同的高度时，它将使内容垂直居中。我认为将 div 向左浮动比将其显示设置为表格单元要好一些。设置边距以考虑两边的边距像素时，您还需要减小宽度

于 2012-07-31T23:16:52.003 回答
1

你的“包装”div 是 600px，每个内部 div 是 300px。这样就没有空间了？

于 2012-07-31T23:15:20.597 回答