Html 为什么我能'；t对齐两个按钮

我有问题，我不能在一行中对齐两个按钮

我试图设置span类pptext2的填充，但没有成功。 这是代码

HTML

---

使用

垂直对齐：中间对齐在两个按钮上

.pptext {
  background: none repeat scroll 0 0 #c9e0e6;
  border: medium none;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  vertical-align: middle;
}

.ppenvelope {
  background: none repeat scroll 0 0 #b2d4dd;
  border: medium none;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  vertical-align: middle;
}

我会设置
float:left和溢出：隐藏在
.ppdiv
上。要确保两个按钮保持相同的高度，还应在其上设置
高度
（例如
高度：48px；
）。您还可以删除
span.pptext2
元素，除非您出于其他目的需要它。看看小提琴：

HTML:


给你

.ppdiv {
    height:43px; 
    overflow:hidden;
}
.ppdiv img {
    padding:10px;
}
.ppenvelope {
    border:none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #b2d4dd;
    float:left;
    height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px) */
}
.pptext {
    border:none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #c9e0e6;
        height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px)*/
}

我刚换了两个按钮上的垂直对齐中间！你试过了吗？就是这样，但我不得不改变填充顶部：13.7px；垫底：12.1px；这个可以吗？这个尺寸是12.1和13.7，加上它的填充物。这个不好，在100%屏幕上，如果我缩放的效果更好的话。
.pptext {
  background: none repeat scroll 0 0 #c9e0e6;
  border: medium none;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  vertical-align: middle;
}

.ppenvelope {
  background: none repeat scroll 0 0 #b2d4dd;
  border: medium none;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  vertical-align: middle;
}

<div class="ppdiv">
    <button class="ppenvelope">
        <img src="http://i.imgur.com/RfLMyak.jpg" alt="Slika">
    </button>
    <button class="pptext">PRIVATE MESSAGE</button>
</div>

.ppdiv{
    overflow: hidden;
}
.ppenvelope, .pptext {
    float: left;
    border: none;
    height: 48px;
}
.ppenvelope{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #b2d4dd;
}
.ppdiv img{
    padding:10px;
}
.pptext{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #c9e0e6;
    color:#4c6974;
}

.ppdiv {
    height:43px; 
    overflow:hidden;
}
.ppdiv img {
    padding:10px;
}
.ppenvelope {
    border:none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #b2d4dd;
    float:left;
    height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px) */
}
.pptext {
    border:none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #c9e0e6;
        height:100%; /*Sets height to 100% of current container, of which is ppdiv (43px)*/
}