如何将列表图标及其内容集中？

发布于 2025-02-13 08:52:21 字数 1376 浏览 1 评论 0原文

希望您能帮助我...我尝试复制一个网站，但我不知道如何对图标列表和内容进行中心对齐。

目前看起来像这样；

我想这样做；

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

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

十年不长 2025-02-20 08:52:21

您可以尝试使用背景图像只需用指向图像的链接替换base64即可。

如果要更改图标的大小，然后编辑自定义属性- IconSize：1.5em上：root （＆lt; html＆gt;）元素。请注意，这与line-height ＆lt; li＆gt;相关超过1行

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

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>

回复收藏 0 原文

花开浅夏 2025-02-20 08:52:21

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

- ＃容器＆gt; ul＆gt; li set <代码>显示：flex 和align-items：中心。

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

回复收藏 0 原文

~没有更多了~