Question

我正在尝试将.get-started-btn垂直放在引导列中。我认为问题可能是因为此按钮已放置在包含display: table-cell的div中，因此我无法在另一个table-cell内创建table-cell？还有另一种方法可以垂直居中按钮吗？

看我的小提琴： JS Fiddle

<div class="page-wrap">
    <main>

      <div class="jumbotron" id="jumbotron">
        <div class="container">

          <div class="row">
            <div class="col-md-8">
              <h1 class="page-header">Flash <span class="page-header-label">Cards</span></h1>
              <p class="lead intro-text">
                Flash Cards is a simple solution for anyone trying to memorize new things or study for that next big test.
                Create your own personal deck of flash cards in minutes and we will track your results to ensure that
                you know your stuff.
              </p>
            </div>

            <div class="col-md-4">
              <div class="vcenter">
                <a href="#/getting-started" class="btn btn-lg btn-success get-started-btn">Get Started</a>
              </div>
            </div>
          </div> <!-- end row -->

        </div> <!-- end container -->
      </div> <!-- end jumbotron -->

    </main>
</div>

CSS

.page-wrap {
  width: 100vw;
  height: 100vh;
}
main {
  display: table;
  width: 100%;
  height: 100%;
}
#jumbotron {
  display: table-cell;
  vertical-align: middle;
  float: none;
}
.vcenter {
  display: table;
  height: 100%; /* does nothing */
  width: 100%; /*pushes element to new line */
  text-align: center;
}
.vcenter a {
  display: table-cell;
  vertical-align: middle;
  float: none;
}

Answer 1

带段落的div是否总是具有相同的内容？如果是，那么你可以尝试：

.vcenter {
    line-height: 270px; /*height of entire div on the left*/
}

删除它：

.vcenter a {
    display: table-cell;
    vertical-align: middle;
    float: none;
    }

Answer 2

对误解你的问题表示歉意。一旦我增加了宽度，我就看到了两列。

您可以通过添加以下样式来垂直居中按钮：

.row {
  display: table-cell;
}

.vcenter a {
  position: relative;
  top: 50%;
  transform: translateY(-50%);}
}

Fiddle

将元素垂直居中于已经垂直居中的元素内

2 个答案: