CSS div 中的垂直对齐按钮不起作用

Question

我的 CSS 按钮在 div 的底部没有垂直对齐，我有以下代码：

<div id="spacebuttons" align="right" style="height: 150px; width:920px; background-color:#6F0; display: inline-block; float:left; vertical-align:bottom">
    <a href="http://www.domain.com/cspace/customerspace.php">
    <img src="images/FontAwesome_f007(0)_32.png" alt="customer space" width="32" height="32" border="0" />
    <button type="button" class="btn btn-default btn-sm" onClick="window.location.href('http://www.domain.com/cspace/customerspace.php')">Customer  Space</button>
    </a>

我做错了什么？

Answer 1

为您的锚标签应用 line-height，与您的 div 身高相同，如下所示。

 <a href="http://www.domain.com/cspace/customerspace.php" style="line-height:150px;">

DEMO

Answer 2

试试这个我已经为你添加了一些样式，但我不知道你的确切输出

#spacebuttons {
    height: 150px;
    width:96%; 
    padding: 2%;
    background-color: #6F0; 
    float:left; 
}
#spacebuttons a {
    line-height: 32px;
    float: right;
    display: block;
}
#spacebuttons a img {
    float: left;
    margin-right: 5px;
}

<div id="spacebuttons">
    <a href="http://www.domain.com/cspace/customerspace.php">
    <img src="images/FontAwesome_f007(0)_32.png" alt="" width="32" height="32" border="0" />
    <button type="button" class="btn btn-default btn-sm" onClick="window.location.href('http://www.domain.com/cspace/customerspace.php')">Customer  Space</button>
    </a>
</div>

CSS div 中的垂直对齐按钮不起作用

CSS vertical align button in div not working

html

css

vertical-alignment