Question

我在同一行中有一些相关的图像/文本元素，在这里我希望图像居中对齐，而文本在其下方则是顶部对齐。

如果我将图像/文本放在不同的行中，这很容易，但是如果将页面调整为较小的尺寸，则不能正确包装。

我想使顶部的示例看起来像底部的示例，但是在调整页面大小时具有相关的元素。 sample screenshot

</head>

  <body>

  <section class="text-center">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-4">
          <div class="mx-auto">
            <img class="img-fluid rounded-circle" width="220px" src="./simple_files/imageA.jpeg" alt="">
          </div>
          <div class="mx-auto">
            <h3 class="text-orange">Text A</h3>
            <p class="lead mb-0">This is the text for section A</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="mx-auto">
            <img class="img-fluid" width="140px" src="./simple_files/imageB.jpeg" alt="">
          </div>
          <div class="mx-auto">
            <h3 class="text-orange">Text B</h3>
            <p class="lead mb-0">This is a little longer text for section B</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="mx-auto">
            <div class="mx-auto">
              <a href="">
                <i class="far fa-envelope fa-2x fa-fw"></i><p class="text-black">me@gmail.com</p>
              </a>
            </div>
            <div class="mx-auto">
              <a href="http://twitter.com/me">
                <i class="fab fa-twitter fa-2x fa-fw"></i><p>@me</p>
              </a>
            </div>
            <div class="mx-auto">
              <a href="#">
                <i class="fa fa-phone-square fa-2x fa-fw"></i><p>0415 123456</p>
              </a>
            </div>
          <div class="mx-auto">
            <h3 class="text-orange">Title C - longer</h3>
            <p class="lead mb-0">A much longer text for section C that should wrap around a bit and test top alignment.</p>
          </div>
        </div>
      </div>
    </div>
  </section>


    <section class="text-center">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-4">
          <div class="mx-auto mb-5 mb-lg-0 mb-lg-3">
            <img class="img-fluid rounded-circle mb-5" width="220px" src="./simple_files/imageA.jpeg" alt="">
          </div>
        </div>
        <div class="col-lg-4">
          <div class="mx-auto mb-5 mb-lg-0 mb-lg-3">
            <img class="img-fluid" width="140px" src="./simple_files/imageB.jpeg" alt="">
          </div>
        </div>
        <div class="col-lg-4">
          <div class="mx-auto mb-0 mb-lg-3">
            <div class="mx-auto mb-5 mb-lg-0 mb-lg-3">
              <a href="">
                <i class="far fa-envelope fa-2x fa-fw"></i><p class="text-black">me@gmail.com</p>
              </a>
            </div>
            <div class="mx-auto mb-5 mb-lg-0 mb-lg-3">
              <a href="http://twitter.com/me">
                <i class="fab fa-twitter fa-2x fa-fw"></i><p>@me</p>
              </a>
            </div>
            <div class="mx-auto mb-5 mb-lg-0 mb-lg-3">
              <a href="#">
                <i class="fa fa-phone-square fa-2x fa-fw"></i><p>0415 123456</p>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4">
          <div class="mx-auto mb-5 mb-lg-0 mb-lg-3">
            <h3 class="text-orange">Title A</h3>
            <p class="lead mb-0">This is the text for section A</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="mx-auto mb-5 mb-lg-0 mb-lg-3">
            <h3 class="text-orange">Title B</h3>
            <p class="lead mb-0">This is a little longer text for section B</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="mx-auto mb-5 mb-lg-0 mb-lg-3">
            <h3 class="text-orange">Title C - longer</h3>
            <p class="lead mb-0">A much longer text for section C that should wrap around a bit and test top alignment.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

</body></html>

同一行中元素与Bootstrap / CSS的垂直对齐方式不同

0 个答案: