How to align text vertially in middle of li

Question

I have a ul with li items in it which i have styled:

<ul class="techlist tech">
  <li>
    <a target="_blank" href="#link1">
      <i class="red far fa-file"></i>content block 1
    </a>
  </li>
  <li>
    <a target="_blank" href="#link2">
      <i class="red far fa-file"></i>content block 2
    </a>
  </li>
  <li>
    <a target="_blank" href="#link3">
      <i class="red far fa-file"></i>content block 3.
    </a>
  </li>
</ul>

I want to add arrow using an html entity to the end and i did this:

ul.techlist a {
  border: 1px solid black;
  padding: 15px;
  margin: 20px 0;
  display: block;
  color: black;
  text-decoration: none;
}
ul.techlist a::after {
    content: '\0203A';
    color: #e6190f;
    float: right;
    display: inline-block;
    font-size: 2em;
    font-weight: bold;
    font-family: arial;
}

The problem is that it when this loads my chevron (0203A enity in css above) loads in the bottom right of the li:a. I'm trying to figure out how to load it to the center vertically but stay on the right.

I've thought about adding the icon as a span if that would work but I'm not much of a css expert here so I may be barking up the wrong tree.

This is a link to my page nodal2 . rudtek.com/resources/technology/ (spaces added around first ".")

this is picture of what I'm trying to do:

Possible duplicate of [CSS vertical alignment text inside li](https://stackoverflow.com/questions/8543859/css-vertical-alignment-text-inside-li) — Bahman Parsa Manesh, Aug 31 '18 at 22:18
except I'm using a pseudo element I'm trying to center, not just text inside of the box. I don't need the text centered, I need the element — rudtek, Aug 31 '18 at 22:19
Possible duplicate of https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div?rq=1 — connexo, Aug 31 '18 at 22:21

Nefaris · Accepted Answer · 2018-08-31T22:41:21.970

4

You can solve the problem by adding: position: relative to a and

position: absolute;
transform: translate(-50%, -50%);
right: .3em;
top: 50%;

Tis is result:

edited Aug 31 '18 at 22:41

answered Aug 31 '18 at 22:30

Nefaris

131
4

score 3 · Answer 2 · answered Aug 31 '18 at 22:33

That's easy:

li {
  padding-right: 25px; /* space for the character */
  position: relative; /* needed for absolute positioning of pseudo element */
}

li::after {
  content: ">";
  color: red;
  font-weight: bold;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

<ul><li>
The problem is that it when this loads my chevron (0203A enity in css above) loads in the bottom right of the li:a. I'm trying to figure out how to load it to the center vertically but stay on the right.<br>

I've thought about adding the icon as a span if that would work but I'm not much of a css expert here so I may be barking up the wrong tree.<br>

This is a link to my page nodal2 . rudtek.com/resources/technology/ (spaces added around first ".")<br>

this is picture of what I'm trying to do:<br>
</li></ul>

How to align text vertially in middle of li

2 Answers2