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

Question

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

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

现在我有以下问题(用chrome测试):当文本是单行时,它将不再在锚标记内居中...此外我不想更改DOM(将文本包裹在span等内...)

你能告诉我为什么按钮的行为与锚不同吗？我已经检查了chrome检查器中的所有样式(computed - > show all).我还检查了: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;
}