CSS: wyrównanie pionowe kotwicy i przycisku

Question

Chcę, aby moje guziki i kotwice wyglądały tak samo. Ale gdy mam długi tekst wewnątrz przycisku/kotwicy, powinien się on rozpaść i wyświetlić tekst wyśrodkowany w pionie. Kiedy jest wystarczająco dużo miejsca, tekst powinien być również wyśrodkowany.

Aby uzyskać tekst na środku i nie przepełnione podczas przerwy tekstowe ustawić line-height:1 też mogę ustawić vertical-align:1 i oczywiście musiałem ustawić white-space: normal inaczej tekst nie pęknie i przycisk będzie przelewać.

Teraz mam następujący problem (testowane z chromem): gdy tekst jest pojedyncza linia nie będzie już wyśrodkowany wewnątrz znacznika zakotwiczenia ... ponadto nie chcę zmienić DOM (zawijania tekstu wewnątrz przęsła itp.)

Czy możesz powiedzieć, dlaczego przycisk zachowuje się inaczej niż kotwica? Sprawdziłem już wszystkie style w inspektorze chrome (obliczono -> pokaż wszystko). Sprawdziłem również style :before i :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>

UPDATE:

Oto możliwe rozwiązanie, ale nie wiem, czy to powoduje skutki uboczne:

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

Answer 1

należy zmienić tutaj // yo musisz zmienić "col-xs-2" na col-xs-12 lub upper, ponieważ kiedy twój tekst jest tak długi, przycisk rozszerza się o dodatkową szerokość col-xs-2. Czy rozumiesz?

<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>