divs不会在CSS中水平对齐

Question

因此，我有困难对齐3 div，是在我的网页上的圆圈。

这是HTML

<div class="row">
<div class="large-9 push-2 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>



<div class="row">
<div class="large-9 push-4 columns">

<div class="cyan"></div>
<a href="#">Recevez</a>


</div>
</div>

<div class="row">
<div class="large-9 push-6 columns">

<div class="orange"></div>
<a href="#">Statistique</a>
</div>
</div>
</div>

下面是CSS：

.green, .cyan, .orange  {
    border-radius: 50%;
    width: 15px;
    height: 15px; 
    position: relative;
    float: left;

}
.green  {
background: #40b564;


}
.cyan   {
background: #61cfcc;

}

.orange {
background: #f8765c;

}

如下所示：

http://4.ii.gl/V0DOyL.png

我基本上希望这3个圆圈(3 Div)是正确的水平对齐。现在，我尝试了显示:内联块；和其他东西，但似乎没有任何效果。我不知道这和方向性框架有什么关系吗？我已经想了好几个小时了，任何帮助都是非常感谢的！

Answer 1

您将它们放在单独的class="rows"中，这就是为什么它们处于单独的行中。你得把它们放进一排。

<div class="row">
<div class="large-4 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>

<div class="large-4 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>

<div class="large-4 columns">


    <div class="green"></div>
    <a href="#">Donnez</a>


</div>

</div>

尝试在你的代码中，上传一个新的快照，我会看看我是否还能帮助。

我注意到的另一个错误是(与当前布局无关)：

<div class="large-9 push-6 columns">

<div class="orange"></div>
<a href="#">Statistique</a>
</div>

你在做large-9 push-6，总数不应该超过12。在你的例子中，它是9+6=15，它应该像large-9 push-3, large-8 push-4 or large-6 push-6，所以总数总是12。