Question

在尝试了无数的引导程序类之后，我试图在容器的中心获得三个按钮，但我无法实现应该简单的目标。现在，按钮在顶部居中居中。 looks like this

代码如下：

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

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

Answer 1

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

<template>
    <vimeo-player
        class="vimeo"
        ref="player"
        :options="{ responsive: true }"
        :video-id="videoID"
        @ready="onReady"
        :autoplay="true"
        :player-height="320"
        :player-width="640"
        loop="1"
      ></vimeo-player>
</template>

<style lang="scss">
.vimeo {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  // max-height: 200px;
  position: absolute;
}
</style>

每个div必须与页面一样宽！我建议您https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

您应该重新组织您的内容。希望能帮助到你。我首先要做的是在您的视频style 中定义一个div（因为引导程序建议它）来设置height。

然后，您可以使用.h-100类使您的内容占据全部可用高度。

我还使用flex-column来组织内容：第1个，<i>，第2个按钮。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<section>
<div id="video-play" class="container-fluid" style="height:300px; background:yellow;">
    <div class="row h-100 text-center">
        <div class="col h-100 d-flex flex-column justify-content-center align-items-center">
                <a href="#" class="video mb-4" 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>
            <ul class="list-inline">
              <li class="list-inline-item"><a href="#" class="btn btn-outline-dark btn-lg">Learn More</a></li>
              <li class="list-inline-item"><a href="#" class="btn btn-outline-dark btn-lg">Learn More</a></li>
            </ul>
        </div>
    </div>
</div>
</section>

Answer 3

下面的代码应将两个按钮相互放置。

StartPage()

有关更多文档，请参见Bootstrap

Bootstrap4垂直对齐容器中的两行

3 个答案: