行引导内的垂直对齐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

首先而不是className你应该使用class.第二,没有办法用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>