行引導內的垂直對齊div

Question

我想重現一個“類似火炬”的視圖，以便2個喜歡/不喜歡的按鈕在行內垂直居中。 我已經將行本身垂直居中：

圖1 - 我現在如何擁有它：

圖2 - 我想要它：

HTML：

<div className="vertical-center">
      <div className="container text-center">
        <div className="row">
          <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button">
            <p>Left button</p>
          </div>
          <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6 vacancy-summary">
            <h2>Main page</h2>
          </div>
          <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button">
            <p>Right button</p>
          </div>
        </div>
      </div>
    </div> 

CSS：

html, body{
  height: 100%;
}

 h1, h2, h3, p{
  margin: 0px;
 }

.container{
  width:90%;
}

.top5 {margin-top: 5%;}
.top7 {margin-top: 7%;}
.top10{margin-top: 10%;}
.top15{margin-top: 15%;}
.top17{margin-top: 17%;}
.top30{margin-top: 30%;}

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: ' ';
  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; /* <-- reset the font property */
}

@media (max-width: 768px) {
  .vertical-center:before {
    display: none;
  }
}

.vote-button{
  border: solid 1px black;
  padding: 10px 0px;
}

.vacancy-summary{
  border: 1px solid black;
  padding: 25px 0px;
}

我嘗試了很多東西，但它搞砸了另一個垂直對齊，所以要非常清楚：

這里有2個垂直對齊方式：

1. 整行需要垂直居中（就像它現在一樣，它的工作原理）
2. 在行內，所有列都需要對齊

這是我想念的簡單事項還是超出了引導范圍的范圍，如果是這樣的話，我如何才能完全自定義呢？

PS：我正在和React一起工作，但我不認為這會導致任何問題

- - - - -編輯 - - - - -

FYI

我必須在我的html中使用className而不是class，因為我在react類中使用它（在render函數內）。這是因為“class”是一個保留的單詞。

Answer 1

首先應該使用class而不是className 。 其次沒有辦法用bootstrap 3（也許是bootstrap 4）這樣做，所以你可以在這種情況下添加一些自定義css或Flexbox來獲得垂直對齊DEMO

.row > div {
  border: 1px solid black;
}
.vertical-center .row {
  display: flex;
  align-items: center;
}
p {
  margin: 0;
}

如果你想使用sm斷點或其他一些你也可以使用媒體查詢DEMO

Answer 2

試試這個，看看片段或Bootply Demo

你已經給了類class =“”class class =“”

 /* CSS used here will be applied after bootstrap.css */ html, body{ height: 100%; } h1, h2, h3, p{ margin: 0px; } .container{ width:90%; } .top5 {margin-top: 5%;} .top7 {margin-top: 7%;} .top10{margin-top: 10%;} .top15{margin-top: 15%;} .top17{margin-top: 17%;} .top30{margin-top: 30%;} .vertical-center { height:100%; width:100%; text-align: center; /* align the inline(-block) elements horizontally */ } .vertical-center:before { /* create a full-height inline block pseudo=element */ content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } .vertical-center > .container { max-width: 100%; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; /* <-- reset the font property */ } @media (max-width: 768px) { .vertical-center:before { display: none; } } .vote-button{ border: solid 1px black; padding: 10px 0px; } .vacancy-summary{ border: 1px solid black; padding: 25px 0px; } .vertical-center .row { align-items: center; display: flex; } 

 <div class="vertical-center"> <div class="container text-center"> <div class="row"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button"> <p>Left button</p> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 vacancy-summary"> <h2>Main page</h2> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button"> <p>Right button</p> </div> </div> </div> </div>