html - Align-self 不以 col-lg-3 为中心

Question

我不明白为什么这不会使图标图像居中 col-lg-3 的中间。

虽然我通常使用一行 'display:flex' ，对齐和对齐项目中心工作正常，但我不确定我在这里缺少什么。我已经通过行 img 和容器尝试了一系列使用 align 和 justify 的组合，但无法正常工作！

    <section id="CSR">
        <div class="price-container5">
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <img class="csrIconsSoc" data-aos="fade-down" data-aos-duration="1000" src="<?php echo get_template_directory_uri(); ?>\Font-Awesome\svgs\solid\users.svg" alt="card image cap">
                    <p class="card-text csrText">How does your business contribute to society and who benefits from such?
                    </p>
                </div>

                <div class="col-lg-3 col-md-6 col-sm-12">
                    <img class="csrIcons" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="350" src="<?php echo get_template_directory_uri(); ?>\Font-Awesome\svgs\solid\globe-americas.svg" alt="card image cap"></img>
                    <p class="card-text csrText">How does your company impact the environment, and how is your business effected by climate change?</p>
                    </p>

                </div>
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <img class="csrIcons" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="500" src="<?php echo get_template_directory_uri(); ?>\Font-Awesome\svgs\solid\compass.svg" alt="card image cap">
                    <p class="card-text csrText">Do you have targets regarding energy consumption and increasing your share of renewable energy?
                    </p>

                </div>
                <div class="col-lg-3 col-md-6 col-sm-12">
                    <img class="csrIcons" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="750" src="<?php echo get_template_directory_uri(); ?>\Font-Awesome\svgs\solid\recycle.svg" alt="card image cap">
                    <p class="card-text csrText">Have you recently considered your recyling methods, how they can be improved,
                        and the cost of not doing so going forward?
                    </p>

                </div>


            </div>
            <div class="aboutButtonFront" data-aos="fade-right" data-aos-duration="2500" data-aos-delay="100">
                <a class="btn btn-lg btn-secondary aboutBtn" href="?page_id=43" role="button">Contact Us &raquo;</a>
            </div>

    </section>

SASS

#CSR {
  .price-container5 {
    display: grid;
    margin: 3% 6%;
    justify-content: center;
    align-content: center;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    overflow-x: hidden;
    height: auto;
  }

  .row {
    display: flex;
    justify-items: center;
    align-items: center;
    height: auto;
    width: auto;
  }

  .csrIcons {
    position: relative;
    text-align: center;
    width: 35%;
    height: auto;
    margin-top: 4rem;
    animation: fadeIn;
    animation-duration: 3s;
    padding-bottom: 20px;
    align-self: center;
    justify-self: center;
  }

  .csrIconsSoc {
    position: relative;
    text-align: center;
    width: 42.5%;
    height: auto;
    margin-top: 4rem;
    animation: fadeIn;
    animation-duration: 3s;
    padding-bottom: 20px;
  }

  .csrText {
    text-align: center;
    margin: 0 4% 2%;
    letter-spacing: 0.75px;
  }

感谢您的帮助！

标签： htmlcss

Answer 1

干得好...

您只需要添加class='text-center'. 我还将您的按钮居中。

让我知道这是否有帮助。如果是，请将我的回答标记为已接受。

  #CSR {
  .price-container5 {
    display: grid;
    margin: 3% 6%;
    justify-content: center;
    align-content: center;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    overflow-x: hidden;
    height: auto;
  }
  .row {
    display: flex;
    justify-items: center;
    align-items: center;
    height: auto;
    width: auto;
  }
  .csrIcons {
    position: relative;
    text-align: center;
    width: 35%;
    height: auto;
    margin-top: 4rem;
    animation: fadeIn;
    animation-duration: 3s;
    padding-bottom: 20px;
    align-self: center;
    justify-self: center;
  }
  .csrIconsSoc {
    position: relative;
    text-align: center;
    width: 42.5%;
    height: auto;
    margin-top: 4rem;
    animation: fadeIn;
    animation-duration: 3s;
    padding-bottom: 20px;
  }
  .csrText {
    text-align: center;
    margin: 0 4% 2%;
    letter-spacing: 0.75px;
  }

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
</head>

<body>

  <section id="CSR">
    <div class="price-container5">
      <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-12 text-center">
          <img class="csrIconsSoc" data-aos="fade-down" data-aos-duration="1000" src="<?php echo get_template_directory_uri(); ?>\Font-Awesome\svgs\solid\users.svg" alt="card image cap">
          <p class="card-text csrText">How does your business contribute to society and who benefits from such?
          </p>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-12 text-center">
          <img class="csrIcons" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="350" src="<?php echo get_template_directory_uri(); ?>\Font-Awesome\svgs\solid\globe-americas.svg" alt="card image cap"></img>
          <p class="card-text csrText">How does your company impact the environment, and how is your business effected by climate change?</p>
          </p>

        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 text-center">
          <img class="csrIcons" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="500" src="<?php echo get_template_directory_uri(); ?>\Font-Awesome\svgs\solid\compass.svg" alt="card image cap">
          <p class="card-text csrText">Do you have targets regarding energy consumption and increasing your share of renewable energy?
          </p>

        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 text-center">
          <img class="csrIcons" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="750" src="<?php echo get_template_directory_uri(); ?>\Font-Awesome\svgs\solid\recycle.svg" alt="card image cap">
          <p class="card-text csrText">Have you recently considered your recyling methods, how they can be improved, and the cost of not doing so going forward?
          </p>

        </div>


      </div>
      <div class="aboutButtonFront text-center" data-aos="fade-right" data-aos-duration="2500" data-aos-delay="100">
        <a class="btn btn-lg btn-secondary aboutBtn" href="?page_id=43" role="button">Contact Us &raquo;</a>
      </div>

  </section>

</body>

</html>