锚定按钮标签未对齐

Question

我似乎无法将已制作的锚标签的标签与按钮对齐。

取消标签显然已关闭。我希望它与Next按钮的标签对齐。我们需要取消按钮作为锚标记，因为该网站需要在没有Javascript的情况下工作。

有人有什么想法吗？

<div class="submit-voucher footer">
  <a href="@Model.ReturnUrl.ToString()" class="cancelLinkButton button cancel">Cancel</a>
  <input class="button default" type="submit" name="submit" value="Next" />
</div>

这是来自Firebug的取消链接/按钮的CSS：

a, a:active, a:visited {
    color: #0066DD;
    text-decoration: none;
}
.cancelLinkButton {
    height: 22px;
    vertical-align: middle;
 }
.button, input[type="submit"], input[type="button"], button {
    background: -moz-linear-gradient(center top , #FDFDFD 0%, #EBEBEB 60%) repeat scroll 0 0 transparent;
    border: 1px solid #BBBBAF;
    display: inline-block;
    padding: 0 20px;
    width: auto;
   }

这是DIV的CSS：

.submit-voucher.footer {
    text-align: right;
    vertical-align: middle;
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
  }

感谢您的帮助。

编辑：在帖子中为代码添加了大括号。

Answer 1

尝试使用line-height

.cancelLinkButton {
    height: 22px;
    vertical-align: middle;
    line-height:22px;
 }

Answer 2

您正在设置取消所覆盖的esle的CancelLinbutton属性。找出取消按钮的所有CSS引用，并查看实际使用的属性。您可以使用F12查看已应用的属性以及已被覆盖的属性。

.cancelLinkButton {
    height: 22px;
    vertical-align: middle;
}

Answer 3

很简单。只需向padding-top添加一些.cancelLinkButton即可。从它的外观来看，你可能需要大约5px左右。

根据元素的border-box值，您可能需要降低.cancelLinkButton与您添加的填充量相同的高度。如果您不知道border-box是什么，那么您几乎肯定需要降低高度。