Flex / Grid layouts not working on button or fieldset elements

Question

I\'m trying to center inner elements of a -tag with flexbox\'s justify-content: center. But Safari does not center them. I can apply

Answer 1

The Problem

In some browsers the element doesn't accept changes to its display value, beyond switching between block and inline-block. This means that a element cannot be a flex or grid container, or a , either.

In addition to elements, you may find this constraint applying to

and

elements, as well.

See the bug reports below for more details.

Note: Although they cannot be flex containers,

elements can be flex items.

---

The Solution

There is a simple and easy cross-browser workaround to this problem:

Wrap the content of the button in a span, and make the span the flex container.

Adjusted HTML (wrapped button content in a span)

Test Test

Test Test

Adjusted CSS (targeted span)

button > span, p {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

Revised Demo

---

References / Bug Reports

Flexbox on a blockifies the contents but doesn't establish a flex formatting context

User (Oriol Brufau): The children of the

are blockified, as dictates the flexbox spec. However, the 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].

is one of these.

&

are as well.

Add support for display:flex/grid and columnset layout inside

elements

User (Daniel Holbert):

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

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 put display:table on it.

Stepping back even further, this isn't specific to

. Consider

and

which also have special rendering behavior.

And old-timey HTML elements like and

and

simply do not support custom display 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.

Also see:

• Flexbug #9: Some HTML elements can't be flex containers
• 10. Some HTML elements can't be grid containers

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...

验证码

 看不清?

提交回复

热议问题