1

How to vertically center a 200px font-size lowercase letter ('x' in this example) in a div ?
-- plz don't redirect me to a 'center a div inside a div' solution... it's not the same question at all...
I'v tried a couple of ways, but all solutions centers the height of the line-box... and a lowercase 'x' is not in the middle of a line-box no matter the line-height... So how to center a lowercase 'x' inside a div ?

Things I've tried :
A) notes : I know that this solution actually centers the height of the line-height, but the 'x' isn't at the center of the line-height (yes i know this is normal). So how do I vertically center the lowercase 'x' then ?

B) no notes

C) notes : this puts 150px padding on top of the line-height (witch is at value 0) and 150px padding at bottom fo line-height.. the problem is that the line-height is positioned a little bit higher that the center of the lowercase 'x', and I know this is all normal. But still i don't know how to center a lowercase 'x' inside a div..

I've also tried messing around with vertical-align but I don't think this is how to resolve this problem... or is it?

/* A) */
#x_container {
  font-size: 200px;
  border: solid black 1px;
  line-height: 300px;
  height: 300px;
}

/* B) */
#x_container_2 {
  font-size: 200px;
  border: solid black 1px;
  height: 300px;
}

#x_container_2 span {
  position: relative;
  display: inline-block;
  background-color: aliceblue;
  top:50%;
  transform: translateY(-50%);
}

/* C) */
#x_container_3 {
  font-size: 200px;
  border: solid black 1px;
  height: 300px;
}

#x_container_3 span {
  display: inline-block;
  background-color: aliceblue;
  line-height: 0;
  padding: 150px 0; 
}
<!-- A) -->

<div id="x_container">x</div>

<!-- i also have tried this:  -->
<!-- B) -->
<br>
<div id="x_container_2">
  <span>x</span>
</div>

<!-- i also have tried this:  -->
<!-- C) -->
<br>
<div id="x_container_3">
  <span>x</span>
</div>
Martin
  • 22,212
  • 11
  • 70
  • 132
alexalex25
  • 33
  • 6
  • Look up a font (such as font-awesome perhaps?) that featurings a centred x glyph and then use that which will be centred to the line-height middle. Like [THIS](https://fontawesome.com/icons/xmark?s=solid) – Martin Aug 19 '22 at 21:51
  • @Martin, thx for your solution but I'm looking to understand how it can work with any lower case letter... I'm looking for a general solution & to understand how this is theoretically possible.. – alexalex25 Aug 19 '22 at 21:58
  • It would be helpful to make this clear in your question. In short, it can't be done very easily as you seemed to understand; fonts are not built to be centred on their midpoint but instead to be centred on their base line (which isn't called a baseline but you should get what I mean?) You can explore arabic lettering which IS centered but is not latin. – Martin Aug 19 '22 at 22:02
  • 1
    there are [A LOT](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) of [OTHER Questions](https://stackoverflow.com/questions/56691352/how-to-vertically-center-text) on this exact topic you're referencing, but your best bet may be to go away and read up how [Lithography](https://en.wikipedia.org/wiki/Lithography) actually works, it is very interesting and somewhat nuanced, as this question kinda highlights `:-)` – Martin Aug 19 '22 at 22:05
  • In short the browser doesn't know how big each font actually is, it knows how big the font container "box" is. This box is the glyph, and the font shape is contained within, commonly the shape within is referred to as a letter or a symbol, and the `!` glyph is the same box size as the `=` . – Martin Aug 19 '22 at 22:08
  • @Martin, thx! I already know how to center a box created with text. The thing is that the middle of the lowercase 'x' is not at the vertical center of this box. I also know that this is normal & I've read a lot about why (the upper part of some glyphs take more vertical space then the lower parts below the baseline). I'm just asking if somebody has a solution for vertically center a lowercase letter. – alexalex25 Aug 19 '22 at 22:17
  • This most likely isn't what you want to hear, but (for all the reasons given here and in thousands of other similar questions and answers) the most reliable solution is to create a high-resolution image of that letter where that letter is centered, and center *that* image on the page... – Johannes Aug 19 '22 at 22:22

1 Answers1

1

#x_container {
    font-size: 200px;
    border: solid black 1px;
    /* line-height: 300px; */
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    
 span {
 width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    align-content: center;
    flex-wrap: nowrap;
    margin-top: 10px;
 }
<div id="x_container"><span>x</span></div
deverasha
  • 65
  • 5
  • Nice @deverasha ! Do you have a solution without using flexbox ? – alexalex25 Aug 19 '22 at 22:30
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 24 '22 at 07:20