我试图将 <button>
的内部元素居中-带有 flexbox 的标签 justify-content: center
.但 Safari 不会将它们居中。我可以将相同的样式应用于任何其他标签,并且它按预期工作(请参阅 <p>
-标签)。只有按钮是左对齐的。
尝试使用 Firefox 或 Chrome,您会发现差异。
是否有任何我必须覆盖的用户代理样式?或者这个问题的任何其他解决方案?
div {
display: flex;
flex-direction: column;
width: 100%;
}
button, p {
display: flex;
flex-direction: row;
justify-content: center;
}
<div>
<button>
<span>Test</span>
<span>Test</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
还有一个 jsfiddle: http://jsfiddle.net/z3sfwtn2/2/
最佳答案
问题
在某些浏览器中 <button>
元素不接受对其 display
的更改值,超越 block
之间的切换和 inline-block
.这意味着 <button>
元素不能是 flex 或网格容器,也不能是 <table>
, 要么。
除了<button>
元素,您可能会发现此约束适用于 <fieldset>
和 <legend>
元素,以及。
有关详细信息,请参阅下面的错误报告。
注意:虽然它们不能是 flex 容器,<button>
元素可以是 flex 元素。
解决方案
这个问题有一个简单易行的跨浏览器解决方法:
包装 button
的内容在span
, 并制作 span
flex 容器。
调整后的 HTML(将 button
内容包装在 span
中)
<div>
<button>
<span><!-- using a div also works but is not valid HTML -->
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
调整后的 CSS(目标 span
)
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
引用资料/错误报告
Flexbox on a <button>
blockifies the contents but doesn't establish a flex formatting context
User (Oriol Brufau): The children of the
<button>
are blockified, as dictates the flexbox spec. However, the<button>
seems to establish a block formatting context instead of a flex one.User (Daniel Holbert): That is effectively what the HTML spec requires. Several HTML container-elements are "special" and effectively ignore their CSS
display
value in Gecko [aside from whether it's inline-level vs. block-level].<button>
is one of these.<fieldset>
&<legend>
are as well.
Add support for display:flex/grid and columnset layout inside <button>
elements
User (Daniel Holbert):
<button>
is not implementable (by browsers) in pure CSS, so they are a bit of a black box, from the perspective of CSS. This means that they don't necessarily react in the same way that e.g. a<div>
would.This isn't specific to flexbox -- e.g. we don't render scrollbars if you put
overflow:scroll
on a button, and we don't render it as a table if you putdisplay:table
on it.Stepping back even further, this isn't specific to
<button>
. Consider<fieldset>
and<table>
which also have special rendering behavior.And old-timey HTML elements like
<button>
and<table>
and<fieldset>
simply do not support customdisplay
values, other than for the purposes of answering the very high-level question of "is this element block-level or inline-level", for flowing other content around the element.
另见:
关于html - Flex/Grid 布局不适用于按钮或字段集元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42751386/