0

How do you vertically center align a :before element. I have tried using vertical-align: bottom, vertical-align:middle, vertical-align: -50% and vertical-align:super. Nothing I do is bringing the plus symbol down to be vertically center aligned with the text next to it.

Any ideas?

.infoTitles {
 color: #2E393F;
 font-family: 'Muli', sans-serif;
 font-size: 1.5rem;
 line-height: 1.5em;
}
.infoTitles:before {
 content: '';
 vertical-align: super;
 float: left;
 margin-right: 8px;
 background-image: url('https://cdn4.iconfinder.com/data/icons/ios7-essence/22/add_plus-512.png');
 background-size: 15px 15px;
 width: 15px;
 height: 15px;
 display: block;
}
<div class="faqBlock">
  <div class="infoTitles">How long will I expect to wait for a quote?</div>
</div>
Paul
  • 3,348
  • 5
  • 32
  • 76
  • 1
    @temani Afif This isn't just a random div to vertically align. My question is specifically addressing a :before element. You are wrong in saying this is a duplicate. – Paul May 02 '18 at 20:24
  • 1
    remove the float and make the element inline block then it will be easy – Temani Afif May 02 '18 at 20:24
  • and did you read the question before? :) ... a before element is an element like any other and vertical alignement will apply the same, so take the time to read the 3 question I made as duplicate, and if you still don't find your answer edit your question and tell me – Temani Afif May 02 '18 at 20:25
  • before is a pseudo-element, it's not like ANY other – StefanBob May 02 '18 at 20:26
  • GOTCHA! Call me Temani – StefanBob May 02 '18 at 20:28
  • @StefanBob when you add display:block to a before element it won't behave like a div? – Temani Afif May 02 '18 at 20:28
  • Gotcha. Removing the float and turning into `inline-block` did the trick. Thank you. – Paul May 02 '18 at 20:29
  • Obviously if you make it behave like another element it will be – StefanBob May 02 '18 at 20:29
  • @StefanBob `Obviously if you make it behave like another element it will be` --> so align a pseudo element is like aligning a div, span, p, img etc etc etc etc ---> so all the dups are perfect dups of this question if of course we take the time to read them before complaining – Temani Afif May 02 '18 at 20:30
  • Why would my `before` element background-images look faded? Anyone have a good resource for this? – Paul May 02 '18 at 20:33

0 Answers0