如何在引導程序中的div內垂直居中放置圖像？

Question

在第一部分中有一個p和一個圖像。 我真的很想知道如何將它們垂直居中。

<section id="banner">
    <div class="container text-center">
        <div class="row">
            <div class="col-md-6">
                <p class="promo-title">Incubamos tus ideas para dar vida a tus sueños</p>
                <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Lorem</a>
            </div>
            <div class="col-md-6 text-center">
                <img src="https://cdn.pixabay.com/photo/2017/08/18/00/23/computer-2653374_960_720.png" class="img-fluid" alt="">
            </div>
        </div>
    </div>
</section>

Answer 1

你可以試試這個

<div class="col-md-6 d-flex justify-content-center align-middle">
     <img src="https://cdn.pixabay.com/photo/2017/08/18/00/23/computer-2653374_960_720.png" class="img-fluid" alt="">
</div>

Answer 2

您可以嘗試添加：

p, img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

從這里復制

Answer 3

您需要flexbox。

<div class="col-md-6 d-flex flex-column align-items-center">
  <p class="promo-title">Incubamos tus ideas para dar vida a tus sueños</p>
  <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Lorem</a>
</div>

在引導程序中，可以添加一些簡單的類，這些類將在所需的flex容器中配置任何元素。 請務必注意，flexbox屬性會影響flex容器和成為flex元素的直接子元素。

將此類添加到div ，該wr包裝您要居中的圖像和段落：

d-flex

這就增加了display: flex到元素並將其變成flex容器！

要在列中包含彈性項目（直接子元素）布局，請添加以下內容：

flex-column

這會將flex-direction: column到元素。

最后，您需要將它們居中，然后添加：

align-items-center

這增加了align-items: center 。 確實有助於理解這些屬性中的每一個，但是如果將所有3個屬性相加，將獲得所需的布局。 更多閱讀：

Bootstrap Flex文檔： https : //getbootstrap.com/docs/4.0/utilities/flex/

我最喜歡的Flexbox資源： https ://css-tricks.com/snippets/css/a-guide-to-flexbox/