Question

我想在页面的中心创建大按钮样式div，并且在大多数情况下，它正在工作。唯一的问题是，我想要它们之间的空间，我似乎无法让它工作。下面是我的CSS。我所做的是创建一个名为Wrapper的div，然后在里面创建另外两个div，一个叫做topleft，另一个是topright。在这个阶段，只有那两个div，但是（并且内部div被称为top的原因）我可能想要在同一行或者稍后的下一行添加额外的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>

Answer 1

查看这个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;
}

当您将line-height设置为与div相同的高度时，它会将内容垂直居中。我认为将div放置在桌面单元格上稍微好一些。设置边距时，还需要减小宽度以考虑任一侧的边距像素

Answer 2

你的“包装”div为600px，每个内部div为300px。这留下了空间吗？

在div之间添加边距

2 个答案: