时间戳

首页 > 解决方案 > Bootstrap4垂直对齐容器中的两行

html - Bootstrap4垂直对齐容器中的两行

问题描述

在尝试了无数引导类之后，我试图在容器的中心获得三个按钮，但我无法实现应该简单的东西。按钮现在水平居中在顶部。 看起来像这样

代码如下所示：

<section>
<div id="video-play" class="container-fluid h-100">
    <div class="row">
        <div class="col d-flex justify-content-center">
            <a href="#" class="video" data-video="https://www.youtube.com/watch?time_continue=1&v=wKc5SSzB4xY" data-toggle="modal"
                data-target="#videoModal">
            <i class="far fa-play-circle fa-5x"></i>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col d-flex justify-content-center">
                <a href="#" class="btn btn-outline-dark btn-lg">Learn More</a>
                <a href="#" class="btn btn-outline-dark btn-lg">Learn More</a>
        </div>
    </div>
</div>

如何让这些按钮在中心垂直对齐？

标签： html

解决方案

您必须创建 3 个不同的 div，并且在每个 div 中您必须放置一个按钮并将它们与标签中心居中

<div><button>1</button></div>
<div><button>2</button></div>
<div><button>3</button></div>

每个 div 必须与页面一样宽！我推荐你https://getbootstrap.com/docs/4.0/layout/grid/

推荐阅读