Question

I have an <a> tag embedded in an <h2> tag as shown in http://codepen.io/anon/pen/gpjZaJ。我遇到的问题是超链接的文本（设置为带Bootstrap的按钮）低于<h2>文本，即：它们不是垂直对齐的。我发现我可以通过将超链接的填充设置为0px来更好地对齐它们，但这不是很好并且看起来有点hacky。我想知道是否有更好的方法来垂直居中超链接。

Answer 1

在示例padding-top中设置为0并且文本确实对齐。我假设你想保持填充并仍然保持文本对齐？

只需在按钮上设置vertical-align: initial（它设置为middle），它在Chrome中看起来很不错：http://codepen.io/anon/pen/WvKLRw

.jumbotron h2 a {
    font-size: inherit;
    vertical-align: initial;
}

Answer 2

您需要建立链接inline-block然后垂直对齐baseline

＆＃13;

.jumbotron {
  text-align: center;
}
.jumbotron h2 a {
  font-size: inherit;
  display: inline-block;
  vertical-align: baseline;
}
span {
  margin-left: -100px;
}
.jumbotron h2 {
  font-size: 48px;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron" id="jumbotron">
  <div class="container">
    <h2><a class="btn btn-info" href="#contact">Contact Us</a> <span>to get your free estimate today.</span></h2>
  </div>
</div>

＆＃13;

我添加了一个跨度并将其移动，以便您可以看到对齐方式。

Answer 3

如果您的问题垂直居中于超链接，请尝试添加课程.jumbotron h2 a中的.jumbotron h2 a { font-size: inherit; padding-top: 0px; padding-bottom: 0px; } 像这样

UINavigationViewController
 -> WelcomeViewController
 -> RoleViewController

垂直对齐<a> embedded in </a> <h2> <a>

3 个答案: