How can I center a list icon and its contents?-CodePudding

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 >
  <div id="container-txt">
      <h1>Share your unfiltered<br>thoughts. Get paid.</h1>
      <p >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>

CodePudding user response：

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,");
  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 >
  <div id="container-txt">
    <h1>Share your unfiltered<br>thoughts. Get paid.</h1>
    <p >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>

CodePudding user response：

#container-txt>ul>li {
  display: flex;
  align-items: center;
  color: var(--terciary-color);
  font-weight: 700;
  list-style-position: inside;
  list-style-type: none;
  margin-bottom: 0.3rem;
}

#container-txt>ul>li svg {
  height: 12px;
  margin-right: 5px;
}

<main >
  <div id="container-txt">
    <h1>Share your unfiltered<br>thoughts. Get paid.</h1>
    <p >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> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https: //fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg>Receive
        99% off the earnings.</li>
      <li> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https: //fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg>Get
        paid via Debit Card, ACH or PayPal.</li>
      <li> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https: //fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg>Withdraw
        your earnings anytime.</li>
    </ul>
  </div>
</main>

-#container>ul>li set display:flex and align-items:center.