使用左/右对齐垂直对齐两个图像

Question

我有一个左 div 和一个右 div，在这两个 div 的整行中，我希望所有 div 都垂直居中，我曾在这样的一个点上工作过：

然而，现在看起来是这样的：

我所做的唯一更改是将“更多信息”按钮从 input 标签更改为带有 a 标签的 img 标签，因为我意识到这些按钮需要转到不同的目标。这是其中一行的 html：

<div class="centervertically">
                <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <div class="alignleft">
                        <div class="leftInnerDiv featureh5">
                            Front page app listing &nbsp;<b>$9.99</b>
                        </div>
                    </div>
                    <div class="alignright">
                        <div class="rightInnerDiv">
                        <input type="hidden" name="cmd" value="_s-xclick">
                        <input type="hidden" name="hosted_button_id" value="PHV69C7ZY5GMG">
                        <input type="image" src="http://www.appninja.io/images/addtocart.png" width="130" height="43" border="0" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                        <a href="marketing.html" target="_blank"><img src="http://www.appninja.io/images/moreinfo.png" width="130" height="43" border="0" border="0"></a>
                        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
                    </div>        
                    </div>
                </form>
            </div>
            <div style="clear: both;"></div>

这里是与之关联的 CSS：

.centervertically,
.alignleft,
.alignright{
    height: 60px;
}

.alignleft:before,
.alignright:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.leftInnerDiv,
.rightInnerDiv{
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.featureh5 {
    font-size: 100%;
    font: inherit;
    font-size: 20px;
}

Answer 1

您的 a 标记是内联的。你应该把display: inline-block和vertical-align: middle放到它上面。