Center text vertically and horizontally, which exceeds its own parent in Firefox

Question

I have the following solution to center my text:

.close-button {
  margin-top: auto;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 5rem;
  background: black;
  color: white;
  position: relative;
  width: 5rem;
  height: 5rem;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

<button class="close-button">
  <div class="mark">+</div>
</button>

As you can see, the element is perfectly centered, I believe. However, when I add a big font-size the element containing text appears at random locations. See below:

.close-button {
  margin-top: auto;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 5rem;
  background: black;
  color: white;
  position: relative;
  width: 5rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  
  /*The line below is new*/
  font-size: 8rem;
}

<button class="close-button">
  <div class="mark">+</div>
</button>

Why is that and how can I fix that, so that the element is centered again?

Thanks to the answers, I found out that align-items: center; solves my issue. However, this does not work in Firefox.

Does anybody know why?

score 0 · Answer 1 · answered Nov 29 '21 at 16:51

You can add :

align-items: center;

.close-button {
  margin-top: auto;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 5rem;
  background: black;
  color: white;
  position: relative;
  width: 5rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  /*The line below is new*/
  font-size: 8rem;
}

<button class="close-button">
  <div class="mark">+</div>
</button>

This is not centered in Firefox. :( – matrixmarten Nov 29 '21 at 21:03 — matrixmarten, Nov 29 '21 at 21:03

Andreew4x4 · Accepted Answer · 2021-12-03T08:40:20.960

0

To fully solve your issue I advise you to read this article about whitespaces in HTML. Adding align-items: center; will solve the issue, but putting div inside button is semantically incorrect, source here.

EDIT: To avoid issues like I would suggest that you should introduce some reset.css for example Normalize. In your case I believe is wrong font-family. Try adding: button {font-family: inherit}.

edited Dec 03 '21 at 08:40

answered Nov 29 '21 at 17:13

Andreew4x4

469
4
18

Thanks so much, I did not know about these libraries. However, `font-family: inherit;` did not fix it for me. I also included the reset.css file in my project; however, that did not work out. If you are still interested, you can see my edited code at [this](https://replit.com/@martenmatrix/StackOverflowDoNotDelete#style.css) repl.it. – matrixmarten Dec 06 '21 at 19:29
Everything works as expected. Just font you are using has plus sign not centred in line. Try `font-family:courier` – Andreew4x4 Dec 07 '21 at 10:11

Center text vertically and horizontally, which exceeds its own parent in Firefox

2 Answers2

Linked