用于在引导轮播中间居中文本的 Flexbox？答案

【问题标题】：Flexbox for centering text in the middle of a bootstrap carousel?用于在引导轮播中间居中文本的 Flexbox？
【发布时间】：2014-05-27 03:25:35
【问题描述】：

我有一个大小不一的盒子网格，其中一个盒子有一个引导轮播：http://www.bootply.com/129530

已经尝试了一系列组合，以使轮播中项目的文本在中间垂直对齐，尤其是表格/表格单元格解决方案..

有人刚刚推荐使用 flexbox.. 非常感谢一个解决方案或示例..

<div class="box10 border">
  <div class="foo">
    <div id="foo-carousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active">
          <div class="bar">...line of text here...</div>
        </div><!-- /item -->
        <div class="item">
          <div class="bar">...paragraph here...</div>
        </div><!-- /item -->
        <div class="item">
          <div class="bar">...paragraph there...</div>
        </div><!-- /item -->
      </div><!-- /carousel-inner -->
    </div><!-- /carousel -->
  </div><!-- /foo -->
</div><!-- /box10 -->

引导轮播 CSS

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner > .item {
  position: relative;
  display: none;
  -webkit-transition: .6s ease-in-out left;
          transition: .6s ease-in-out left;
}

基本自定义 CSS

.box10 {
  height:20%;
}
.foo {
  height: 100%;
}
.bar {
  text-align: center;
  font-size: 1.4vw;
  letter-spacing: .03em;
}

【问题讨论】：

标签： html css twitter-bootstrap vertical-alignment flexbox

【解决方案1】：

简单使用：

.foo {
  height: 100%;
  display: flex;
  align-items: center;
}

这告诉 .foo div 使用 flexbox 并垂直对齐里面的东西。如果需要，添加供应商前缀。

【讨论】：