CODEWITHSUNDEEP
htmlcss
Vitor
Vitor

Reputation: 3

How can I center a list icon and its contents?

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; enter image description here

I wanna do this; enter image description here

#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>

Upvotes: 0

Views: 172

Answers (2)

Simp4Code
Simp4Code

Reputation: 1479

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>

Upvotes: 3

Nexo
Nexo

Reputation: 2331

#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 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> <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.

Upvotes: 0

Related Questions