使用弹性框垂直对齐按钮内的文本答案

【问题标题】：Vertically aligning text inside a button using flexbox使用弹性框垂直对齐按钮内的文本
【发布时间】：2014-07-09 11:52:20
【问题描述】：

我正在尝试创建一个应该使 anchor 和 button 标记的类，每当我将它们分配到一个类中时，它们看起来都是一样的，

我正在使用 flexbox 为我处理媒体对象，如下所示：

.media {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 1em;
 }
.media--center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.media__fig {}
.media__bd {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0;
    -moz-box-flex: 1;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
}

问题是，它看起来不一样，也不对齐。这是一个小提琴：http://jsfiddle.net/WTf9e/1/

【问题讨论】：

标签： html css flexbox

【解决方案1】：

所以，有几件事：

(1) 测试用例中的display: inline-block 无效，因为它被稍后出现的display:flex 取代，并适用于具有相同特异性的相同元素。这就是为什么<a> 元素最终成为页面宽度的原因——它的display:flex 使它成为块级，这意味着它的自动宽度拉伸以填充可用空间。如果您希望您的元素是内联级别的，您应该使用display:inline-flex 而不是flex。（并删除 inline-block 样式，因为它无论如何都会被覆盖）

(2) 您将display:flex 直接设置在<button> 上（通过为其分配“媒体”类），并且doesn't work in Firefox -- 按钮仅对其display 值作出反应尊重它们是内联级还是块级。（如该错误页面中所述，Chrome 在其他特殊元素（如 <table> 和 <fieldset>）上具有类似行为，尽管出于某种原因它确实接受了 <button> 上的自定义“显示”样式。Firefox 在任何情况下都不会情况。）要解决此问题，您需要在 <button> 的 wrapper-div inside 上设置 display:flex，而不是在 <button> 本身上设置。（或者，除了<button> 本身）

(3) 您可能需要 <button> 中的 wrapper-div 具有 100% 的高度和 100% 的宽度，否则它将获得一些按钮自动在其上执行的自动居中行为孩子（并且不通过 CSS 公开）。也许你不需要这个，但我想这会在 <a> 和 <button> 之间表现出不同的行为。

【讨论】：