Адаптируемых блоков не работает на кнопки или элементы полей

Я пытаюсь центрировать внутренние элементы a <button> - тег с flexbox в justify-content: center. Но Safari не центрирует их. Я могу применить тот же стиль к любым другим тегам, и он работает по назначению (см. <p> - tag). Только кнопка выровнена по левому краю.

попробуйте 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>

и a jsfiddle: http://jsfiddle.net/z3sfwtn2/2/

2 60
html css css3 flexbox safari

2 ответа:

проблема в том, что <button> элемент не предназначен для гибкого (или сеточного) контейнера.

на момент написания этой статьи браузеры на основе Webkit (Chrome и Safari) придерживались этого принципа проектирования. Firefox и Edge - нет. Я не тестировал другие браузеры.

поэтому у вас не должно быть проблем с созданием <button> элемент flex (или grid) контейнер в Firefox и Edge. Но не ожидайте, что он будет работать в Chrome или Safari.

такое поведение в настоящее время применяется, по крайней мере, три элемента:

  • <button>
  • <fieldset>
  • <legend>

я теоретизирую, но я считаю, что идея заключается в поддержании уровня здравого смысла при стилизации HTML-элементов. Например, боги HTML хотели помешать авторам превратить кнопку в таблицу.

однако, по крайней мере, в этом случае, есть простой и легкий обходной путь:

оберните содержимое button на span и выберите span гибкий контейнер.

скорректированный 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 (targeted span)

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

Пересмотрел Демо

Примечание: хотя они не могут быть гибкими контейнерами,button элементы могут быть гибкими предметы.

ссылки:

93

вот мой самый простой хак.

button::before,
button::after {
    content: '';
    flex: 1 0 auto;
}
11