Различное вертикальное выравнивание с помощью Bootstrap / CSS для элементов в одной строке - PullRequest
Новая
       20

Различное вертикальное выравнивание с помощью Bootstrap / CSS для элементов в одной строке

0 голосов
/ 30 апреля 2019

У меня есть несколько связанных элементов изображения / текста в той же строке, где я хотел бы, чтобы изображения были выровнены по центру, а текст был выровнен сверху под ним.

Если я помещу изображения / текст в разные строки, это легко, но тогда, если размер страницы будет меньше, она не будет правильно обернута.

Я бы хотелполучить верхний пример, похожий на нижний, но привязать элементы при изменении размера страницы. пример скриншота 

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