A tricky vertical alignment of text with different font-size

Question

I have this structure and I can not change it, I can only make changes to the CSS and I do not have permission to use flex.

The idea is to verticaly align text with different font-sizes and present in different containers.

.wrap {
  display: table;
}

.container a {
  background-color: #cecece;
  line-height: normal;
  text-decoration: none;
  font-size: 100px;
  padding: 10px;
  display: table-cell;
  vertical-align: middle;
}

.container a span {
  vertical-align: middle;
}

.before::before {
  content: "1-xyZ";
  font-size: 50px;
  color: red;
  vertical-align: middle;
}

<div class="wrap">
  <div class="container">
    <a href="#">
      <span class="before"></span>
      <span>2-xyZ</span>
    </a>
  </div>
</div>

the problem is that regardless of the font-size of "1-xyZ" or "2-xyZ" I need these aligned vertically center.

@TylerH i don't agree a lot with the duplication even if it deals with almost the same thing ... but here we have to align two different text inside different containers and also different font-size too — Temani Afif, Dec 20 '17 at 19:16
It's easier to take things lightly than to look at the problem really. thanks @TemaniAfif — lecaro, Dec 20 '17 at 19:21
am voting to reopen the question ... to bad it got *blindly* closed — Temani Afif, Dec 20 '17 at 19:37
@TemaniAfif Don't be rude. This question has been asked a hundred times on this site and there are multiple canonical questions which have dozens of answers each on how to do this. — TylerH, Dec 20 '17 at 19:38
See https://stackoverflow.com/questions/linked/8865458?lq=1 and https://stackoverflow.com/questions/linked/2939914?lq=1 and https://www.google.com/search?q=how+do+I+vertically+align+text+in+css+site%3AStackoverflow.com&ie=utf-8&oe=utf-8&client=firefox-b-1-ab and more — TylerH, Dec 20 '17 at 19:41
@TylerH am not rude, simply show me an answer that deal with this particular issue : aligning different texts with different font sizes and inside different container .. then i will agree with you :) — Temani Afif, Dec 20 '17 at 19:41
@lecaro i made some update to the question, hope to gather more reopen votes ;) — Temani Afif, Dec 20 '17 at 19:43
@TemaniAfif you insinuated the people who closed the question don't know what they are doing or did not put effort into it (e.g. "blindly"); that's rude. — TylerH, Dec 20 '17 at 19:44
@TemaniAfif As for an *exact* duplicate of this problem, here's one that focuses just on two spans of differently-sized text https://stackoverflow.com/questions/3997983/how-to-vertically-align-2-different-sizes-of-text — TylerH, Dec 20 '17 at 19:46
@TylerH I beg you an answer for this question ... deal with different font-sizes and keep them inside the container, please — lecaro, Dec 20 '17 at 19:46
@lecaro see my link immediately above; it's the same technique used in many answers in the target this question was closed as a dupe of. — TylerH, Dec 20 '17 at 19:46
@TylerH Do you think I'm a child? I have been doing web pages for more than 20 years ... If I ask is because I do not have an answer ... please show me yours — lecaro, Dec 20 '17 at 19:50
@TylerH i said blindly because i saw the users and at least two of them are experienced but have no point on the CSS badge :) so it's clear they only read the title or saw that there is a lot of votes to close the question. And am sure you know that many people do this, especially when you have more than 3 votes, you assume that all of them are right and you did the same — Temani Afif, Dec 20 '17 at 19:50
@TylerH i also agree with the last duplicate, and if you mention it at the start it could be better as it's almost the same even if there is some minor differences and where i don't see any good answer though — Temani Afif, Dec 20 '17 at 19:54
@lecaro No one said you were a child. The initial duplicate target and the most recent one both include answers that solve your problem, including all the methods people have given here *and* more besides. The point of closing as a duplicate is to *point you in the direction of existing helpful content*. It's not some slight against you or the answerers here. — TylerH, Dec 20 '17 at 19:59
@TylerH I just want to add ... a lot of debate, but I do not have the correct answer yet ... Still waiting for yours — lecaro, Dec 20 '17 at 20:09
@lecaro I'm not going to provide an answer; not only is this question closed (so adding another answer is impossible), but the target duplicate and the other links I've provided already give solutions to your exact scenario. — TylerH, Dec 20 '17 at 20:16
@TylerH, You are absolutely wrong ... I reviewed the 32 possible associated topics and none of them gives me an answer to my problem ... thank you very much for taking my question lightly and for being part of having it closed ... — lecaro, Dec 20 '17 at 20:39
@lecaro Really? The accepted answer in the target, https://stackoverflow.com/a/8865463/2756409, provides the answer given by Paulie *and* the one by Johannes (along with https://stackoverflow.com/a/8865488/2756409), while https://stackoverflow.com/a/26565610/2756409 covers the hack given by Temani. The later exact, scoped duplicate in my 5th comment has an accepted answer of https://stackoverflow.com/a/3998033/2756409, which is the exact same method covered originally in the first link. You must have reviewed the wrong questions/links somehow, because I would like to assume you are not lying. — TylerH, Dec 20 '17 at 20:47
Here's yet another question with a scenario like yours with the same solution that everyone else has already provided https://stackoverflow.com/questions/35907127/how-to-align-pseudo-element-before-after-and-span-element — TylerH, Dec 20 '17 at 20:50

Paulie_D · Answer 1 · 2017-12-20T19:06:22.360

0

Just make the pseudo-element display:table-cell and vertical-align: middle

.wrap {
  display: table;
}

.container a {
  background-color: #cecece;
  line-height: normal;
  text-decoration: none;
  font-size: 100px;
  padding: 10px;
  display: table-cell;
  vertical-align: middle;
}

.before::before {
  content: "1-xyZ";
  display: table-cell;
  font-size: 50px;
  color: red;
  vertical-align: middle;
}

<div class="wrap">
  <div class="container">
    <a href="#">
      <span class="before"></span>
      <span>2-xyZ</span>
    </a>
  </div>

edited Dec 20 '17 at 19:06

answered Dec 20 '17 at 18:59

Paulie_D

107,962
13
142
161

at the end it was easier than i expected :) – Temani Afif Dec 20 '17 at 19:04
@Paulie_D you are forgetting something important... please, invert the font size. the problem is that the sizes could be different between them – lecaro Dec 20 '17 at 19:31

score 0 · Answer 2 · answered Dec 20 '17 at 19:08

0

You can add line-heights with the same values as the font-sizes:

.wrap {
  display: table;
}

.container a {
  background-color: #cecece;
  line-height: normal;
  text-decoration: none;
  font-size: 100px;
  line-height: 100px;
  padding: 10px;
  display: table-cell;
  vertical-align: middle;
}

.container a span {
  vertical-align: middle;
}

.before::before {
  content: "1-xyZ";
  font-size: 50px;
  line-height: 50px;
  color: red;
  vertical-align: middle;
}

<div class="wrap">
  <div class="container">
    <a href="#">
      <span class="before"></span>
      <span>2-xyZ</span>
    </a>
  </div>
</div>

answered Dec 20 '17 at 19:08

Johannes

64,305
18
73
130

some one who has an issue with all answers i guess :) – Temani Afif Dec 20 '17 at 19:12
@TemaniAfif yes, seems like - well... – Johannes Dec 20 '17 at 19:13
By the way i don't see a difference when you added the line-height on my side. It's always the same result as the OP snippet – Temani Afif Dec 20 '17 at 19:28
@Johannes, it's not a perfect alignment, in case there is not a better one, I would use it ... you tried with the same font-size for both? – lecaro Dec 20 '17 at 20:23
The essential problem is that in any case vertical alignement of a text line will refer to the vertical center of the full line-height. But it's not defined at which vertical position of the line-height the baseline is. Also, fonts consist of different characters which have different ascenders and descenders, fonts vary in x-height and so on (see also https://en.wikipedia.org/wiki/Mean_line) So WHAT is the vertical center of a text line? Mathematically, the center of the line-height. But optically this will be perceived differently for every font. So there is no "right" answer to that... – Johannes Dec 20 '17 at 22:30
In your example, you obviously wanted the "-" characters to be at the same height - but those aren't necessarily at the vertical center of the vertical space which is occupied by the all characters of a font together... – Johannes Dec 20 '17 at 22:32

A tricky vertical alignment of text with different font-size

2 Answers2