CODEWITHSUNDEEP
htmlcssvertical-alignment
Siler
Siler

Reputation: 9514

Vertically centering pseudo element text

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:

enter image description here

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:

enter image description here

...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?)

Upvotes: 0

Views: 2520

Answers (4)

Shirley Charlin Lee
Shirley Charlin Lee

Reputation: 97

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?

Upvotes: 0

Jinu Kurian
Jinu Kurian

Reputation: 9426

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>

Upvotes: 0

Danield
Danield

Reputation: 125651

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.

Upvotes: 0

CoderPi
CoderPi

Reputation: 13221

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>

Upvotes: 1

Related Questions