Vertical align icon with multiline text

Question

I have following CSS:

.dropdown section h4::after {
    content: url(img/plus-symbol.svg);
    right: 0;
    vertical-align: middle;
    position: absolute;
    display: inline-block;
}

Can somebody give me a little hint on how to bring "+" icon to the middle in the last item?

Try adding those two rules: `top: 50%; transform: translateY(-50%);` — Phiter, Dec 26 '17 at 19:04

score 6 · Accepted Answer · answered Dec 26 '17 at 19:05

6

You can use:

top: 50%;
transform: translateY(-50%);

ul {
  width: 100px;
  padding-left: 0;
}

li {
  position: relative;
  list-style: none;
  border: 1px solid;
  padding-right: 20px;
  margin-bottom: 10px;
}

li:after {
  content: "+";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Lorem ipsum dolor sit amet</li>
</ul>

answered Dec 26 '17 at 19:05

Stickers

75,527
23
147
186

But I am using like section h4 div::after{content:" "}, I am not using ul li :( – Ashish Dec 26 '17 at 19:13

score 1 · Answer 2 · answered Dec 26 '17 at 19:38

.dropdown section h4 {
    position: relative;
}

.dropdown section h4::after {
    content: url(img/plus-symbol.svg);
    right: 0;
    vertical-align: middle;
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%)
}

More information about browser compatibility of transform The transform: translate() property allows you to move an element relative to his height or width. So if you're + icon does have an height of 40px, transform: translateY(-50%) will move up you element of 20px.

You could also have a look to display: table-cell to use vertical-align: middle, but it might depends of your HTML structure. :)

Another solution is the use of flexbox.

Vertical align icon with multiline text

2 Answers2