How can I center a list icon and its contents?

July 6, 2022

I hope you can help me… I trying to copy a site but I don’t know how to do a center alignment of an icon list and a content.

It currently looks like this;

I wanna do this;

#container-txt > ul > li {
  color: var(--terciary-color);
  font-weight: 700;

  list-style-position: inside;
  list-style-image: url(./assets/Checkmark.svg);

  margin-bottom: 0.3rem;
}

<main class="intro">
  <div id="container-txt">
      <h1>Share your unfiltered<br>thoughts. Get paid.</h1>
      <p class="paragraph">Spense is an open platform for individuals to share their unfiltered thougths.<br>Discuss the topics you love, and get paid for doing <em>just</em> that.</p>

      <ul>
          <li>Receive 99% off the earnings.</li>
          <li>Get paid via Debit Card, ACH or PayPal.</li>
          <li>Withdraw your earnings anytime.</li>
      </ul>
  </div>
</main>

>Solution :

You can try with background-image just replace the base64 with a link to your image. This will vertically align the icon to the center of the first line (even it wraps onto more lines)

If you want to change the size of the icon then edit the custom property --iconSize: 1.5em that is set on the :root (<html>) element. Note that this is tied with line-height of the <li> so don’t make it too big or small or your text will have odd spacing if it wraps onto more than 1 line

:root{
  --iconSize: 1.5em;
  --iconGap: .5em;
}

#container-txt > ul {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  list-style: none;
  padding-left: 0
}

#container-txt > ul > li {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z'/%3E%3C/svg%3E");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: var(--iconSize);
  color: var(--terciary-color);
  font-weight: 700;
  line-height: var(--iconSize);
  padding-left: calc( var(--iconSize) + var(--iconGap) )
}

<main class="intro">
  <div id="container-txt">
    <h1>Share your unfiltered<br>thoughts. Get paid.</h1>
    <p class="paragraph">Spense is an open platform for individuals to share their unfiltered thougths.<br>Discuss the topics you love, and get paid for doing <em>just</em> that.</p>

    <ul>
      <li>Receive 99% off the earnings.</li>
      <li>Get paid via Debit Card, ACH or PayPal.</li>
      <li>Withdraw your earnings anytime.</li>
      <li>Quisque urna euismod semper non consequat ullamcorper dis dolor euismod nulla a parturient dictumst rhoncus dignissim nibh nam a aliquet himenaeos est magna leo.</li>
    </ul>
  </div>
</main>