为什么我的按钮偏离中心？

enter image description here

的按钮不是垂直相互对齐，因为他们应该的。

这里是我的HTML代码：

  <div class="incorrect-guesses"> 
       <h4>Incorrect Guesses</h4> 
       <div class="incorrect-guess">A</div> 
       <div class="incorrect-guess">A</div> 
       <div class="incorrect-guess">A</div> 
       <div class="incorrect-guess">A</div> 
       <div class="empty-guess"></div> 
       <div class="empty-guess"></div> 
       <div class="empty-guess"></div> 
       <div class="empty-guess"></div> 
      </div>

而CSS作用于他们：

.empty-guess { 
    display: inline-block; 
    width: 38px; 
    height: 38px; 
    margin: 0 3px 6px 0; 

    border: 1px solid #ccc; 
} 

.incorrect-guess { 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    margin: 0 3px 6px 0; 

    background: #e32a3c; 
    color: #fff; 
    line-height: 2.5em; 
    text-align: center; 
    text-decoration: none; 
}

我用网上督察一吨的时候，看看是否有任何的推动，他们除了说方式，但似乎没有什么是我可以在网络督察检测。

来源

2013-02-17 Doug Smith

的jsfiddle例子？ – 2013-02-17 00:20:36

看起来像你的'h4'标签正在推倒他们。 – 2013-02-17 00:21:18

只需将vertical-align: bottom添加到emtpy元素即可。

http://jsfiddle.net/G3Kky/

来源

2013-02-17 00:21:46

这工作，但为什么？ O_o – 2013-02-17 01:13:49

老实说，我不是100％肯定的，但'垂直对齐'确保所有元素都垂直对齐，尽管他们的盒子模型 – 2013-02-17 01:15:32

哈哈，够公平，我只是好奇它为什么没有首先不起作用。：P – 2013-02-17 01:20:12

什么爆丸说，或使用上的所有元素：

display: block; 
float: left;

来源

2013-02-17 00:26:16

要快速解决这个恼人的问题是float的div到left。所有其他CSS可以保持不变。

.empty-guess, .incorrect-guess { 
    float: left; 
}

这是结果：

Fixed image with float:left

JS Fiddle Example

来源

2013-02-17 00:50:23 JSW189

为什么我的按钮偏离中心？

回答

相关问题