Bootstrap: Wrong vertical align in button links

[Miqueliu]

I saw that the button links doesn't obey to vertical-align style. It keep being to top, not in the middle. Here is visible this problem.

[mdo]

This doesn't appear to be a problem with vertical-align. Looks like <button>s get some flexbox styling that anchors do not. We could perhaps reset this in Bootstrap with two additional properties on our .btn elements, but I'm unsure of the downstream affects of that.

This fixes it in your demo:

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

[Miqueliu]

Yes, it is a nice solution.

However, according I'm testing, buttons doesn't apply any native flex style. This is verifiable adding only display: inline-flex; declaration.

[mdo]

It's a user agent style, directly from the browser.

[Miqueliu]

Sorry, but it has no sense. Despite your browser applies some secondary property of flex, the Bootstrap's display: inline-block; declaration to .btn nullifies any flex effect.

Besides that in Firefox align-items is displayed as the default value (normal).

[ffoodd]

@mdo FWIW, in Boosted .btn is display: inline-flex as a default (mostly to ease alignment within button, eg. an icon or multiple pieces of text).

The only drawback I know off is that there's no more "automatic" whitespaces between two button (since they're due to inline-block).

[ffoodd]

Investigating a bit further, it's defintely related to vertical-align and our misunderstanding of how it works. Just have a look at the same, extended Fiddle for a fresh example. Even when using vertical-align: bottom, link is top aligned.

This is because for inline-blocks, the content box is affected by vertical-align, not the text node.

However this wouldn't solve the issue. @Miqueliu You'd have to either use inline-flex, or to use a custom line-height which value should be equal to your min-height.

You may want to read CSS-Tricks' "Centering in CSS: A Complete Guide".

@mdo is there any good reason to keep vertical-align on .btn? Just tested in master and I can't see any difference anywhere (buttons, buttons groups, dropdowns…). It's pretty confusing.

And shouldn't we use inline-flex on buttons, now? As I said, this is used in Boosted for months (years, maybe) without any drawbacks I can think of. And it'd be simple to PR :)