2

How to vertically align bullet points with text in this code? I can't find the CSS property:

screenshot of bullet points to align

URL: https://scienceofhappyrelationships.com/mistake-10-neglecting-your-appearance/

Thanx

1 Answer 1

3

They achieve the bullet points by adding a pseudo object before the <li> with the bullet point character which is styled and positioned with the css below

.cnt article ul li:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: '\f04d';
    color: #408c52;
    display: inline-block;
    font-family: FontAwesome;
    line-height: 3em;
    font-size: 5px;
    padding-right: 10px;
}

because the rotate raises the bullet point you need to set the centre of the transofmation to be the middle of the bullet point so that the rotate does not change the height so you need to add

transform-origin: -50%;

Hope this helps!

4
  • Thank you! And how to align bullets vertically with the text? The bullets are above the vertical midline of the text. May 28, 2017 at 19:14
  • for a quick dirty way of doing this you can add a translateY transform to make it more aligned i.e. transform: translateY(7px) rotate(45deg);
    – Alessi 42
    May 28, 2017 at 19:19
  • See my edit, the non quick and dirty way is to set transform-origin: -50%; hope you can make my answer the accepted answer.
    – Alessi 42
    May 28, 2017 at 19:25
  • OK, I made your answer the accepted one. Thank you again! May 28, 2017 at 19:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.