Question

我正在尝试垂直对齐我的引导程序面板中最右边的列。我知道这个问题已经被问到并在stackoverflow上做出了回应，但我找到的所有解决方案都不起作用，因为它们通常要求行中的所有列都居中。

我的代码：

.hotel-panel {
  padding-top: 0;
  padding-bottom: 0;
}
.panel-image {
  padding: 0;
  margin: 0;
}
.rate {
  display: inline-block;
  vertical-align: middle;
  float: none;
}

Answer 1

您可以使用panel with table：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.hotel-table td {
  padding: 16px !important;
}
.hotel-table h4 {
  margin-top: 0;
}
td.hotel-image {
  padding: 0 !important;
  width: 250px;
}
td.hotel-about {
  width: 100%;
}
td.hotel-rate {
  text-align: center;
  vertical-align: middle !important;
}

<div class="container">
  <div class="panel panel-default">
    <table class="table hotel-table">
      <tbody>
        <tr>
          <td class="hotel-image">
            <img src="http://s3.amazonaws.com/governmentswagger/IMG_2843.JPG" alt="asdf" width="250">
          </td>
          <td class="hotel-about">
            <h4>Hilton Atlanta Buckhead</h4>
            <p>Free parking</p>
            <p>Free wifi</p>
          </td>
          <td class="hotel-rate">
            <h4>$289</h4>
            <button type="button" class="btn btn-primary">Govt Rate Link</button>
          </td>
	    </tr>
      </tbody>
    </table>
  </div>
</div>

http://www.bootply.com/v8JrzAcONR

Answer 2

您可以使用flexbox，但这会影响整行。我认为最简单的方法是使用转换..

  .vcenter {
      top:50%;
      transform: translateY(50%);
      -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
  }

http://www.bootply.com/4dADRREDVH

引导。单列的垂直对齐方式

2 个答案: