CSS: Vertical alignment of anchors and buttons

Question

I want my buttons and anchors to look the same. But when I have a long text inside the button / anchor, it should break and display the text vertically in the center. When there is enough space, the text should also be centered.

To get the text centered and not overflow when the text breaks, I set line-height:1 and I set vertical-align:1 , and of course I had to set white-space: normal , otherwise the text would not break and the button would overflow would.

Now I have the following problem (tested with chrome): when the text is a single line, it will no longer be centered inside the anchor tag ... further I don’t want to change the DOM (wrapping text within a range, etc.)

Can you tell me why a button behaves differently than a snap? I already checked all the styles inside the chrome inspector (computed -> show all). I also checked the styles :before and :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:

Here is a possible solution, but I do not know if this causes side effects:

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

Answer 1

You must change here // you need to change "col-xs-2" to col-xs-12 or upper, because when your text is so long, the button expands to the width of col-xs-2. you understand?

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