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%);
}

Copied from here

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中，该类将包裹您要居中的图像和段落：

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/

我如何在Bootstrap中的div内垂直居中放置图像？

3 个答案: