如何垂直对齐标题和链接？

Question

我正在使用github的Primer CSS框架，我希望href与class='btn'和<h3>在同一行中进行垂直对齐。< / p>

我可以试着破解这个，但在此之前，我想知道是否有推荐的方式？

Answer 1

无需破解任何东西。这是一个Fiddle。这只是使用Floats将两个元素放在同一行上的简单情况。因为你正在使用Primer.css，你只需使用内置的列布局。

要获得匹配的行高，您会注意到<h3>上有额外的边距。因此，只需调整按钮元素的大小即可获得相似的边距。下面你会看到我对课程.h3-size的所作所为。

HTML结构

<div class="container">
  <div class="columns">
    <div class="one-fifth column center-text">
      <a href="#" class="btn primary h3-size">My Button</a>
    </div>
    <div class="four-fifths column ">
      <h3>My H3 heading</h3>
    </div>
  </div>
</div>

<强> CSS

.h3-size {
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.1;
}