1

I read many, many.... many tips on how to vertically align stuff inside elements. I couldn't find one that exactly did what I wanted.

To simplify, I have a div container and a span inside with a text, like this:

<html>
  <body>
    <div class="container">
      <span>My Text</span>
    </div>
  </body>
</html>

I just wanted that my text be vertically aligned in the span. Here is the basic CSS I was using to try to align it.

.container {
  margin: 20px 0;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

.container span {
  color: white;
  font-size: 200px;
  font-weight: 900;
  line-height: 200px;
  vertical-align: middle; /* no effect */
}

Here is what it looks like with the inspector: enter image description here Notice that the top of the uppercase letters hit the top of the span, but the bottom of the letters, especially others than the y are far from the bottom of the span. That gets even worse with monospace font-family (which is the one I really want). enter image description here Weirdly enough, the top of the letters now don't touch the top of the span (?!) I tried to manipulate the text inside the span using position: relative and changing the top and bottom, and I also tried to use the transform: translateX() function, all to no avail.

So you may wonder why the hell that small space is important. Well, when I apply clip-path to my span, the polygon of 0 50% is not in the center of the text, in fact, because of the huge area on the bottom, it clips my text to almost 100% of the height of the letters, like this: enter image description here Yeah yeah, I know I can clip it to around 30% of the Y axis and be around 50% of the text, but 1) this will change depending on the font-family and 2) what the hell? What's up with that?

I haven't tried using flexbox as I wasn't accepting that pure CSS couldn't do something simple like that. But maybe I'm missing something. Has anyone seen this? I'm guessing the font "definition" has that huge space on the bottom reserved for some weird character, so the Roman letters are positioned on the top of the space and the bottom area is wasted?

EDIT (Answer to justinw): my code in jsfiddle that you pasted on the commented shows up wrong both in FF and Chromium: enter image description here as for the second link, with flex in jsfiddle, the font size is too small, so I increased to check it and it shows wrong in FF enter image description here But it is correct in Chromium like that: enter image description here But even in Chromium, it fails with font-family: monospace; enter image description here I have no idea why :(

EDIT (answer to Kenny): As with the answer to justinw. It fails in FF: enter image description here It works in Chromium: enter image description here But fails in Chromium if the font-family is monospace: enter image description here

EDIT (answer to Dexterians): I added a gray background in the span for visualization purposes. I pasted the screenshot from jsfiddle below, in FF. vertical-align has no effect. And it fails: enter image description here In Chromium indeed vertical-align affects the positioning and it works (even a little better than the trials with flex as the bottom part of the "y" letter is inside the span box: enter image description here But even in Chromium it fails if the font-family is monospace: enter image description here

Adriano_Pinaffo
  • 1,429
  • 4
  • 23
  • 46
  • 1
    On Safari 14, the [text appears centered](https://jsfiddle.net/oawed7fs/1/) using your code. Out of curiosity, why would using `flexbox` not be "pure css"? Adding `display: flex` and `align-items: center` is a quick and easy way [to vertically align stuff within a container](https://jsfiddle.net/s8a2do7p/). – justinw Sep 24 '20 at 02:16
  • try to apply these on the .container: display: flex; align-items: center; justify-container: center; https://jsfiddle.net/KennyChoy/ej2z9c8d/5/ – Kenny Sep 24 '20 at 02:18
  • Your code works fine for me in Chrome, and turning ``vertical-align`` off or on does affect the text; https://jsfiddle.net/v0n5db4j/ - I'm thinking it's either the browser, or you have other code elsewhere that is affecting your element. – Dexterians Sep 24 '20 at 02:21
  • @justinw, I placed the answer in the question. Only flex in Chromium worked, but not in Firefox. – Adriano_Pinaffo Sep 24 '20 at 03:13
  • @Kenny, I added an answer in the Question. It is the same as with justinw.... – Adriano_Pinaffo Sep 24 '20 at 03:24
  • @Dexterians, I placed an answer in my question. It may indeed be a browser thing. – Adriano_Pinaffo Sep 24 '20 at 03:34
  • @Adriano_Pinaffo which is strange, as I just tested in my FF (81.0) and it works fine. – Dexterians Sep 24 '20 at 04:52
  • @Adriano sorry for replying so late coz I'm a bit busy, I haven't test this yet but could solve your problem, try to add those -webkit-, -ms-, -moz- https://stackoverflow.com/questions/37306138/flexbox-not-working-properly-on-firefox-but-okay-on-chrome-safari – Kenny Sep 24 '20 at 06:35
  • 1
    When centring you need to first define the *center* which is something you cannot really do since all the fonts are different and they aren't designed the same way. Actually all the attempts you are showing are centred but you simply don't like how they look. Also using line-height equal to font-size will lead to unexpected result ... we generally use a line-height bigger than the font-size – Temani Afif Sep 24 '20 at 10:35
  • @Dexterians, my FF is 80.0.1, I will try to update it but I'm doubting that is the issue – Adriano_Pinaffo Sep 24 '20 at 12:27
  • @Kenny, the vendor prefix in your answer is for the flexbox in the display. – Adriano_Pinaffo Sep 24 '20 at 12:29
  • @TemaniAfif, it is not that I don't like them... they differ from one another depending on the font-family or the browser I'm using. If you have a font style that touches the top of the span but no parts of it whatsoever touches the bottom of the span, there is no way we can consider that as centered. Having a line-height value different from the font size makes no difference. – Adriano_Pinaffo Sep 24 '20 at 12:32
  • *they differ from one another depending on the font-family or the browser I'm using* --> that's why I said you need to define the center. Centring a font is not something generic so you cannot do what you want since they are different. You can see all of them as centred since all of them are different (or not) – Temani Afif Sep 24 '20 at 12:34
  • @TemaniAfif, so why, using the exact same code, the text "looks" centered in Chromium but does not "look" centered in FF? – Adriano_Pinaffo Sep 24 '20 at 12:43
  • 1
    because the font is not the same, monospace is not a unique font. Each browser has its own default monospace font (monospace is a type of font). Try to use an explicit font like a google font and it will render everywhere the same (read my second duplicate for more detail) – Temani Afif Sep 24 '20 at 12:45

1 Answers1

-3

Try vertical-align: baseline Or Margin: 0 auto;

Legionnaire
  • 60
  • 1
  • 8
  • vertical-align: baseline has different behaviors in different browsers. margin: 0 auto would center horizontally, and not vertically. And margin: auto only affect block elements, span is inline. – Adriano_Pinaffo Sep 24 '20 at 12:48