Bootstrap按钮工具栏中的垂直对齐链接

Question

这非常挑剔，但我希望在此示例中将链接与按钮的基线对齐。这与浮点数有关，因为如果我在.btn-toolbar .btn-group上禁用浮动，则链接文本基线将与按钮中文本的基线对齐。我尝试过各种各样的事情，例如vertical-align: middle;和position: relative;，但没有成功。

如何垂直对齐链接文本以使其与按钮文本具有相同的基线？

问题

我想要什么

代码

  <div class="btn-toolbar clearfix" role="toolbar" aria-label="Toolbar with button groups"> 
    <div class="btn-group" role="group" aria-label="First group"> 
      <button type="button" class="btn btn-default">1</button> 
      <button type="button" class="btn btn-default">2</button> 
      <button type="button" class="btn btn-default">3</button> 
      <button type="button" class="btn btn-default">4</button> 
    </div> 
    <div class="btn-group" role="group" aria-label="Second group"> 
      <button type="button" class="btn btn-default">5</button> 
      <button type="button" class="btn btn-default">6</button> 
      <button type="button" class="btn btn-default">7</button> 
    </div> 
    <div class="btn-group" role="group">
      <a href="#">Super helpful link</a>
    </div>
    <div class="btn-group pull-right" role="group" aria-label="Third group"> 
      <button type="button" class="btn btn-default">8</button> 
    </div> 
  </div>

普拉克

Here is a sample Plunk

Answer 1

https://plnkr.co/edit/RPGdmqAOKbGCZ4z5FZmU?p=preview

<a href="#" style="line-height: 2.3;">Super helpful link</a>

添加一些行高可以解决您的问题。

第二件事

• 在px中使用高度和行高以获得更好的效果

在你的情况下使用它     line-height: 34px;     height: 34px;