All geek questions in one place

Text and image in <button> will not stay on the same line using flexbox in Firefox

I want to display a button with an image and text. Text and image should be in the center and on one line / line.

In Firefox, the image and text are always on separate lines. How can i solve this?

This is what I have:

button { display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: stretch; align-items: center; } button img { order: 0; flex: 0 1 auto; align-self: auto; } button span { order: 0; flex: 0 1 auto; align-self: auto; }

Jsfiddle

+2
source share
2 answers

Some HTML elements, by design, do not accept display changes. Three of these elements:

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

For example, display: table will not work on fieldset .

Similarly, applying display: inline-flex to a button will be ignored by the browser.

There are other reasonable restrictions. For example, some browsers will ignore overflow: scroll elements on a button . (Tested: Firefox, no scrolling, Chrome, yes)

So, on the bottom line, the button element cannot be a flex container.

An easy fix is ​​to wrap the contents of the button in a div and make the div container a flexible container. Or (as pointed out in the comments) use span instead of div as it supports standards compliance.

HTML

 <button href="#"> <div> <img src="http://placehold.it/10x10"> <span>Click me</span> </div> </button>

CSS

 div { display: flex; justify-content: center; align-items: center; }

Demo

NOTE. Although they cannot be flexible containers, button elements can be flexible.

More details here:

+5
source

demo: https://jsfiddle.net/tr55t9c5/3/

remove all css and just add only this css.

  button {text-align:center;}
-1
source

Source: https://habr.com/ru/post/989520/

More articles:


All Articles