Question

我想重现一个“类似火炬”的视图，以便2个喜欢/不喜欢的按钮垂直居中在行内。我已经将行本身垂直居中：

图1 - 我现在如何拥有它：

图2 - 我想要的方式：

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

<p>
Lorem <span>1</span> Ipsum <span>2</span> Dolor <span>3</span>
</p>
</p>

CSS：

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

我尝试了很多东西，但它搞砸了另一个垂直对齐，所以非常清楚：

这里有2个垂直对齐方式：

整行需要垂直居中（就像它现在一样有效）
在行内，所有列都需要对齐

这是我想念的简单事项，还是超出了引导范围的范围，如果是这样，我如何才能完全自定义呢？

PS：我正在与React合作，但我不认为这会导致任何问题

--------- ---------- EDIT

FYI

我必须在我的html中使用className而不是class，因为我在react类中使用它（在render函数内）。这是因为“class”是反应中的保留字。

Answer 1

首先代替className，您应该使用class。其次没有办法用bootstrap 3（也许是bootstrap 4）这样做，所以你可以在这种情况下添加一些自定义css或Flexbox来获得vertical-align DEMO

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

如果您想使用sm断点或其他一些，您还可以使用媒体查询DEMO

Answer 2

试试这个，看看代码段或Bootply Demo

你给了班级这样的班级=＆＃34;＆＃34;注入className =＆＃34;＆＃34;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

行引导内的垂直对齐div

2 个答案: