html - 对齐按钮和 div 中的链接，在 IE 中损坏，在 FF 中有效

Question

我知道之前有人问过这个问题，但我似乎无法让它正常工作。

我正在尝试垂直对齐 div 中的按钮和链接。按钮和链接都应该在同一条线上，彼此垂直居中。它适用于 FireFox，但不适用于 IE7 或 IE8。

HTML:

<div class="submitform">   
    <input type="submit" value="Initiate Request" />  
    <a href="/test2">Cancel</a>
</div>

CSS:

.submitform a 
{
    padding-left: 10px;
}

.submitform
{
    width: 600px;
    vertical-align: middle;
    padding-top: 15px;
    height: 30px;
}

这是它在 IE7 和 8 中的样子:

请注意，取消链接未与按钮在中间垂直对齐。它在 FireFox 中正确对齐。

这是我想要的样子:

这里是继承的样式:

如何修复对齐？

谢谢!

Answer 1

您需要将 CSS 更改为:

.submitform {
    width: 600px;
    height: 30px;
}

.submitform input, .submitform a {
    vertical-align: middle;
}

.submitform a {
    padding-left: 10px;  line-height: 30px;
}

这里的主要变化是:

1. 将 vertical-align: middle 从父元素移动到子元素。
2. 将 line-height: 30px 应用于 anchor 标记。
3. 从父元素中移除了 padding-top: 15px。如果您需要填充，请改为增加高度。

这适用于跨浏览器并支持 IE7(未在 IE6 中测试)。如果文本溢出到两行，这将中断。

See live demo here .