4

I have a grid of numbers and the selected one must be shown with a background gradient. So I used the normal procedure with flex-box, as we can see in the code. But the number isn't in the exact center of the square as it's supposed it should be.

.cell {

  /* Square definition */
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 2rem;
  
  /* Centering */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Background at the center */
  color: white;
  background: radial-gradient(ellipse at center, red 0%,red 50%, transparent 55%);
}
<div class="cell">15</div>

Why does this happen? How can I make the number be exactly in the middle of the square without any extra markup?

EDIT: On the left it's how it looks now, on the right it's how I think it should look like. The browser is Chrome on Linux.

How it should look

EDIT II: There must be an issue with how this markup is rendered on Linux. Here's how I see the codepen courtesy of G-Cyr provided in a comment:

enter image description here

I tried the same codepen on Windows and it shows the number perfectly centered.

amedina
  • 2,838
  • 3
  • 19
  • 40
  • 1
    But I am seeing it centered.. :) – Arup Rakshit Aug 30 '18 at 17:59
  • Perhaps the browser you are using does not have good flexbox capability (e.g., IE)... Please take a screenshot and use the image tool in the editor to add that to your question. – Heretic Monkey Aug 30 '18 at 18:02
  • Possible duplicate:https://stackoverflow.com/questions/43979702/display-flex-not-working-on-internet-explorer/43979973 – Fabio Manzano Aug 30 '18 at 18:04
  • Do not use ellipse for the gradient but circle. And you'll be fine. – Gerard Aug 30 '18 at 18:13
  • @FabioManzano It's not a duplicate, and it has nothing to do with IE. It happens on Firefox too. – amedina Aug 30 '18 at 18:13
  • @Gerard I tried with circle too and it doesn't work. – amedina Aug 30 '18 at 18:14
  • It could be the line-height that the font have for default. try to use line-height 0 to see if that fix that – Alejandro Maliachi Quintana Aug 30 '18 at 18:34
  • what is the font-family you are using and which browser(s) do you use for test ? i'd like to reproduce your issue, but it requires the right font .... (remenber, characters stands on the baseline, to live a gap for the pqj letters ...) – G-Cyrillus Aug 30 '18 at 19:34
  • actually, with a ruler , the gap on top and under the numbers have the same height : 40px or 41 if you include the border ..... – G-Cyrillus Aug 30 '18 at 19:46
  • @G-Cyr About the font, it's the default one. I didn't specify it when I wrote the question because in my original project, the `font-family` specified is `Helvetica, Arial, sans-serif` and it happens the same. But I have to add that now I'm writing from a Windows machine (using Chrome) and I see it centered too. I originally wrote this question from Chrome with a Linux (Ubuntu) machine. – amedina Aug 30 '18 at 19:54
  • 1
    i made a test page adding a cross to show middles, the last one is your image which you say okay. https://codepen.io/anon/pen/vzyorQ . to me the text is vertically centered (ff w7) . (the font is much thicker for me) – G-Cyrillus Aug 30 '18 at 19:58
  • 1
    @G-Cyr I updated the question using your codepen. Thanks for it. – amedina Aug 30 '18 at 20:14
  • 1
    ff 61.0.2 on macos does not show perfectly centered but Chrome 68 does. – rlejnieks Aug 30 '18 at 20:20

1 Answers1

0

I think this is not a flex-box issue, but something to do with the line-height. One way to overcome this is to adjust line-height manually by experimenting a bit like so:

.cell {

  /* Square definition */
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 2rem;
  
  
  /* Centering */
  display: flex;
  justify-content: center;
  line-height:6.7rem;

  color: white;
  background: radial-gradient(ellipse at center, red 0%,red 50%, transparent 55%);

}
<div class="cell">75</div>
rlejnieks
  • 521
  • 4
  • 8
  • adjusting line-height might be a good idea, but it will need different values when different font-familys are used. we do not know which is the one the op uses :( , so hard to guess what is the values that will do. – G-Cyrillus Aug 30 '18 at 19:40
  • @G-Cyr Yes I agree. Bu I did not see that it was mentioned that font-family will change often. And if this is an issue with fallback fonts then the solution could be a load-screen that displays content only when the right font has loaded. Depends if this can be solved in a more semantic way or not. If not this is an option. – rlejnieks Aug 30 '18 at 20:11
  • looks like it is a browser rendering issue anyway. but font can be very different in the size and position they are drawn , here the op is using a nice and smart font (helvetica) with safe fallbacks to avoid tricky rendering if missing ;) – G-Cyrillus Aug 30 '18 at 20:25