html - 使用 flexbox 垂直对齐按钮内的文本

Question

我正在尝试创建一个类，它应该使 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;
}

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

Answer 1

所以，有几件事:

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

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

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