CSS：锚点和按钮的垂直对齐文本

Question

我希望我的按钮和锚点看起来一样。但是，当我在按钮/锚点中有长文本时，它应该会中断并显示垂直居中的文本。当有足够的空间时，文本也应该居中。

为了使文本居中并且在文本中断时不溢出，我设置了line-height:1，我还设置了vertical-align:1，当然我必须设置white-space: normal，否则文本不会中断并且按钮会溢出.

现在我有以下问题（用 chrome 测试）：当文本是单行时，它不会再在锚标记内居中...此外 我不想更改 DOM （将文本包装在 span 等内）

你能告诉我为什么按钮的行为与锚点不同吗？我已经检查了 chrome 检查器中的所有样式（计算 -> 全部显示）。我还检查了:before 和:after 样式。

.btn{
  white-space: normal !important;
  height: 45px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-2">
    <a href="#" class="btn btn-default">test loooooooooooooooooooongstring<a>
    <br /><br />
    <button class="btn btn-default">test loooooooooooooooooooongstring</button>
  </div>
</div>
    
<br /><br /><br />
    
<div class="row">
  <div class="col-xs-12">
    Should be centered!!
    <br />
    <a href="#" class="btn btn-default">test string<a>
     <br /><br />
    <button class="btn btn-default">test string</button>
  </div>
</div>

Answer 1

这对我有用：

.btn{
   display: inline-flex;
   align-items: center;
}

Answer 2

你应该在这里改变 // 您需要将 'col-xs-2' 更改为 col-xs-12 或以上，因为当您的文本很长时，按钮会从 col-xs-2 宽度额外扩展。你明白吗？

<div class="row">
    <div class="col-xs-12">
     <a href="#" class="btn btn-default">test loooooooooooooooooooongstring<a>
    <br /><br />
   <button class="btn btn-default">test loooooooooooooooooooongstring</button>
    </div>
</div>