Question

我正在使用Flexbox来对齐两个相邻列的高度，这是有效的。我现在需要在不使用固定高度的情况下将内部内容垂直居中在柔性框列中。此外，这一切都需要在Bootstrap 3中工作。请参阅下面的代码：

＆＃13;

.row-flex,
.row-flex > div[class*='col-'] {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex: 1 1 auto;
}
.row-flex-wrap {
  -webkit-flex-flow: row wrap;
  align-content: flex-start;
  flex: 0;
}
.row-flex > div[class*='col-'],
.container-flex > div[class*='col-'] {
  margin: -.2px;
  /* hack adjust for wrapping */
}
.container-flex > div[class*='col-'] div,
.row-flex > div[class*='col-'] div {
  width: 100%;
}
.flex-col {
  display: flex;
  display: -webkit-flex;
  flex: 1 100%;
  flex-flow: column nowrap;
}
.flex-grow {
  display: flex;
  -webkit-flex: 2;
  flex: 2;
}
.content {
  border: 1px solid black;
  padding: 20px;
}
.content-inner {
  border: black solid 1px;
  padding: 20px;
}
.img {
  width: 100px;
  height: auto;
  display: block;
  margin: 0 auto;
}
figcaption {
  text-align: center;
}
[class*="col-"] {
  padding: 0;
}

＆＃13;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row row-flex row-flex-wrap">
    <div class="col-xs-7">
      <div class="content">
        <div class="content-inner">
          <figure>
            <img class="img" src="http://i80.photobucket.com/albums/j182/swiftian/headersnstuff/sidebar_zaius.jpg" alt="Macaque in the trees">
            <figcaption>Dr. Zaius</figcaption>
          </figure>
        </div>
      </div>
    </div>
    <div class="col-xs-5">
      <div class="content">
        <div class="content-inner">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
        </div>
      </div>
    </div>
  </div>
  <!--/row-->
</div>
<!--/container-->
<hr>

＆＃13;

JS FIDDLE https://jsfiddle.net/baydbzbn/1/

感谢任何帮助。

Answer 1

将此添加到您的.content类CSS定义

  display: flex;
  align-items: center;

垂直居中显示内容：flex;列

1 个答案: