Child only breaks out of inline-grid parent in Firefox

Question

I want the image centered within my button but it breaks out in Firefox while it works flawlessly in Google Chrome. Why does this occur and how can I prevent it from happening?

Here is the code:

button {
    all: unset;
    height: 50px;
    width: 50px;
    display: inline-grid;
    place-items: center;
    background-color: firebrick;
}

button img {
    height: 60%;
    margin: auto;
}

<button><img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Black_square.jpg"></button>

Here is what it looks in Chrome:

And in Firefox:

Instead of width: 50px you have to specify grid-template-columns: 50px; — tom, Aug 15 '19 at 08:58

Grzegorz T. · Accepted Answer · 2019-08-15T09:09:50.197

1

display: inline-grid is not needed. Button is a block element and everything set in the body will be in the middle of the button

button {
  height: 50px;
  width: 50px;
  background-color: firebrick;
}

button img {
  height: 60%;
  margin: auto;
  display: block;
}

<button><img src="https://upload.wikimedia.org/wikipedia/commons/9/99/Black_square.jpg"></button>

edited Aug 15 '19 at 09:09

answered Aug 15 '19 at 08:52

Grzegorz T.

3,903
2
11
24

2

*Button is a block element and everything set in the body will be in the middle of the button* : can you explain what you mean by this? button isn't a block element – Temani Afif Aug 15 '19 at 08:54
@TemaniAfif true. The `Button` element is by default an `inline-block` element. Nevertheless the core of the answer is correct. Removing `inline-grid` will solve the problem. – j.Doe Aug 15 '19 at 08:59
It is however not 100% centered, is it? It looks shifted upwards – leonheess Aug 15 '19 at 09:00
@j.Doe removing everything will also work (margin:auto, text-align:center) .. but still don't understand the explanation – Temani Afif Aug 15 '19 at 09:00
I wrote it wrong, I meant that every element of text or in this case img placed between the opening and closing the tag will be inside this button. – Grzegorz T. Aug 15 '19 at 09:01
2

@MiXT4PE you need `display:block` to the image to avoid the whitespace at the bottom and it will be centred – Temani Afif Aug 15 '19 at 09:01

Child only breaks out of inline-grid parent in Firefox

1 Answers1