如何对齐元素并将图标添加到 bootstrap li答案

【问题标题】：How to align elements and add icon to bootstrap li如何对齐元素并将图标添加到 bootstrap li
【发布时间】：2021-01-23 01:33:08
【问题描述】：

我不知道如何使图标与文本居中。我有 SVG + 文本。我可以用普通的 CSS（flex-box）来做到这一点，但我必须使用引导程序。另外，我想让文本居中，所以它会像网页的其他部分一样居中，我希望它垂直对齐

我有这个：

我想得到这个：

我尝试了不同的解决方案，但没有想出一个好主意。所以问题是：

如何使文本向左居中以使其看起来居中？
如何使 svg 图标与文本对齐？

谢谢

        <section class="perks">
        <img src="./media/blueCircle.svg" alt="" />
        <div class="container">
            <div class="row">
            <div class="col perksFirst">Perks of Meetlete</div>
            <div class="w-100"></div>

            <div class="row perksList">
                <div class="col">Access to our secure video platform!</div>
                <div class="col">
                <img src="./media/2.svg" alt="" />Calls are executed through our
                App!
                </div>
                <div class="w-100"></div>

                <div class="col">Metelete calls take place on your time!</div>
                <div class="col">None of your information is shared!</div>
                <div class="w-100"></div>

                <div class="col">Build loyalty with your fans!</div>
                <div class="col">Make lifetime memories!</div>
                <div class="w-100"></div>

                <div class="col">Earn up to 10x more than other platforms!</div>
                <div class="col">Meetlete calls are timed!</div>
            </div>
            <div class="w-100"></div>
            <div class="col">
                <button class="earlyAccess btn">Early access</button>
                <div class="launchDate">Launching 2/14/21!</div>
            </div>
            </div>
            
        </section>


        .perks {
        display: flex;
        text-align: center;
        margin-top: 310px;
        position: relative;
        }

        .perks .earlyAccess {
        margin-top: 117px;
        }
        .perks img {
        position: absolute;
        left: 0;
        top: -50%;
        }

            .perks .row {
            justify-content: center;
            }

            .perksList {
            max-width: 860px;
            display: flex;
            justify-content: center;
            align-items: center;
            }

            .perksList .col {
            font-weight: 600;
            font-size: 18px;
            display: flex;
            align-items: center;
            display: flex !important;
            text-align: start;
            margin-top: 26px;
            }

            .perksFirst {
            margin-bottom: 77px;
            font-size: 24px;
            font-weight: 700;
            }

            .launchDate {
            font-weight: 700;
            font-size: 18px;
            margin-top: 26px;
            }

【问题讨论】：

标签： html css bootstrap-4 flexbox

【解决方案1】：

为了使图标与文本对齐，您可以将它们放在一起或者你使用引导网格https://getbootstrap.com/docs/4.6/layout/grid/。通过将文本放在列表中，您可以轻松地使用它来动态呈现所有内容。

您可以在外部 div（容器）上使用 text-align: center 将所有内容居中。然后在内部（perklist）中向左对齐文本，以防这会使您的文本全部左对齐。

【讨论】：

【解决方案2】：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  justify-content: center;
  margin: auto;
  text-align: left;
  margin-top: 10px;
}

.heading {
  text-align: center;
  padding: .5rem;
}

.heading h3 {
  font-size: 24px;
  font-weight: 700;
  text-transform: capitalize;
}

.card {
  background: whitesmoke;
  padding: 2rem;
  border: darkgrey
}

span {
  display: flex;
  vertical-align: middle;
  padding-top: 1rem;
}

span img {
  display: inline-flex;
  height: 2rem;
}

span a {
  font-size: 18px;
  font-weight: 600;
  line-height: 2rem;
  padding-left: .5rem;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Solution By Tarak</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="new.css">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xl-1"></div>
      <div class="card col-xl-10 col-sm-12">
        <div class="row">
          <div class="heading col-12">
            <h3>Perks of Meetlete</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-xl-6 col-md-12">
            <span><img src="./test-tubes.svg" /><a>Access to our secure video platform!</a></span>
            <span><img src="./test-tubes.svg" /><a>Metelete calls take place on your time!</a></span>
            <span><img src="./test-tubes.svg" /><a>Build loyalty with your fans!</a></span>
            <span><img src="./test-tubes.svg" /><a>Earn up to 10x more than other platforms!</a></span>
          </div>
          <div class="col-xl-6 col-md-12">
            <span><img src="./test-tubes.svg" /><a>Calls are executed through our App!</a></span>
            <span><img src="./test-tubes.svg" /><a>None of your information is shared!</a></span>
            <span><img src="./test-tubes.svg" /><a>Make lifetime memories!</a></span>
            <span><img src="./test-tubes.svg" /><a>Meetlete calls are timed!</a></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

跨度 img 的高度 == 跨度 a 的行高（使其成为内联中心）

更改您选择的 svg。

玩转风格。

【讨论】：