Vertically centering pseudo element text

Question

I've been trying to figure out how to vertically center an ::after pseudo-element that contains text (a content attribute).

Previous questions: there are some previous questions which address this, but none of the solutions seem to work for this simple case.

Here I basically have a simple DIV that should function as a "next" button. It contains a simple right arrow (Unicode 0x203A).

The markup is basically just:

<div class = "next-button"></div>

And the CSS is:

.next-button {
    position: absolute;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background: black;
    cursor: pointer;
}

.next-button::after {
    content: "\203A";
    color: white;
    font-size: 3em;
    line-height: 0;

}

JSFiddle link: https://jsfiddle.net/me6a3nq2/

So, I've been trying various things to center this. Firstly, vertical-align:middle doesn't work here. Another CSS trick is to set the line-height of the parent element equal to the height of the parent element. However, this doesn't seem to work either.

I can add position:relative to next-button::after, and then adjust top accordingly, but this won't exactly center the arrow unless I know the exact height of the arrow, which may change or vary across browsers.

I also tried using a common CSS method, which is to use translateY, as specified here. I usually have very good success with this method:

.next-button::after {
    content: "\203A";
    color: white;
    font-size: 3em;
    line-height: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

But even this doesn't work with the pseudo element. It appears to move the arrow, but it places it off-centered towards the bottom, at least on Chrome:

I also notice, when using the Chrome Inspector tool, that the arrow itself, which is basically just a character of text, seems to have "padding" automatically above and below it, and that the "above" padding is seemingly larger than the below padding, causing the arrow to be uncentered vertically:

...but, I can't really tell why this padding exists, nor do I seem to have any control of it. I thought it might be line-height, so I set line-height to 0, but that had no effect.

So, I'm out of ideas. I'm thinking I may need to give up on using a pseudo element and just make the arrow inside a nested DIV.

Question: Is there any way to vertically align a pseudo element? (And also, what is the cause of the "padding" above and below of the text in the pseudo element content?)

@Abhitalks it only seems to be centered beacause it's smaller, but it's not :/ — CoderPi, Jan 06 '16 at 11:21
@Abhitalks, it doesn't work. The example you posted just happens to appear centered. But change the height to `100px` and you see it's not centered. https://jsfiddle.net/LhthmtL3/3/ — Siler, Jan 06 '16 at 11:40
@Siler: agreed, my bad. It seems to be the internal ascender height on the character, which I missed. — Abhitalks, Jan 06 '16 at 12:39
the use of 2 pseudo and font-size set on parent would help https://jsfiddle.net/me6a3nq2/5/ — G-Cyrillus, Jan 06 '16 at 13:04
@GCyrillus - It looks like you should answer this question. That's a really nice technique. I'd really appreciate an explanation as to *how* this works as well. I'll probably also delete my answer because it now seems to be incorrect — Danield, Jan 06 '16 at 13:18
@Danield not sure it is an answer but, if 2 inline-block elements are side by side, you can use vertical-align to center them to each other., because of letter and font-family used, the second vertical-align property needs to be tuned. test: http://codepen.io/anon/pen/EPWExj an icon or an image should be used here to master the layout :) — G-Cyrillus, Jan 06 '16 at 15:01

CoderPi · Answer 1 · 2016-01-06T12:41:51.607

1

If it's OK for you, set line-height: 65px;:

That's how I do it in my Projects. But if the height changes you will have to change the line-height as well. The problem is that these Symbols are not verticly centered at their center of look, but on the baseline for text. I don't think there is a better solution to this.

.next-button {
  position: absolute;
  height: 70px;
  line-height: 70px;
  text-align: center;
  background: black;
  cursor: pointer;
}
.next-button::after {
  font-family: Arial;
  content: "\203A";
  color: white;
  font-size: 3em;
  line-height: 65px;
}

<div class="next-button"></div>

edited Jan 06 '16 at 12:41

answered Jan 06 '16 at 11:18

CoderPi

12,985
4
34
62

Looks like it is still not centered and aligned somewhat towards the middle. Same issue as mine I guess. I too didn't know why I was downvoted. – Praveen Kumar Purushothaman Jan 06 '16 at 11:43
@PraveenKumar its centered in all my Browsers, wich one do you use? – CoderPi Jan 06 '16 at 11:45
@PraveenKumar well it's centered on my Chrome.. can you make a screenshot? – CoderPi Jan 06 '16 at 12:16
Oh it looks like we have diffrent fonts. I set the font to Arial for Demo, should be centered now? – CoderPi Jan 06 '16 at 12:42

Danield · Answer 2 · 2016-01-06T13:10:48.517

Is there any way to vertically align a pseudo element?

Yes, and all of the ways you describe actually work.

Take for example the transform method - just add a border to the character - and you can clearly see that the character - which includes the entire area in the red border - is centered (Fiddle Demo)

So the problem here is that the character glyph itself isn't centered - and that's probably for a good reason - just like an underscore character isn't centered either.

So this actually has nothing to do with pseudo elements but rather the specific character you have chosen to center.

You'll either have to manually adjust the character so that it centers OR use a different character for your arrow.

I see what you're saying about the centering of the glyph itself. But regardless, this seems to still be dependent on the size/height of the text itself. Like if I change the font-size to `1em`, suddenly it's not centered: https://jsfiddle.net/me6a3nq2/6/ — Siler, Jan 06 '16 at 14:04

score 0 · Answer 3 · answered Jan 07 '16 at 12:21

Although line-height will do the job, I found out another solution.!!

Just give vertical-align:sub to the pseudo element of .next-button.

Here is the fiddle.

    .next-button {
     position: absolute;
     height: 70px;
     line-height: 70px;
     text-align: center;
     background: black;
     cursor: pointer;
    }
    
    .next-button::after {
     content: "\203A";
     color: white;
     font-size: 3em;
     line-height: 0;
      vertical-align: sub;
   }

<body>
 <div class = "next-button"></div>
</body>

score 0 · Answer 4 · edited May 23 '17 at 12:32

0

You can use flexbox in CSS3.

display: flex,
justify-content: center  // or you can also use space-around, it all depends.

// other ways:
align-item: center  or;
align-self: center

Here a link to a example: How do I vertically center text with CSS?

edited May 23 '17 at 12:32

Community

1
1

answered Aug 08 '16 at 05:51

Shirley Charlin Lee

87
1
13

Vertically centering pseudo element text

4 Answers4