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

Question

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

但现在，它看起来像这样：

我所做的唯一更改是将input标签中的“更多信息”按钮更改为img标签a标签，因为我意识到这些按钮需要转到不同的目标。这是其中一行的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添加到其中。