Question

我有一个大小不一的盒子网格，其中一个盒子有一个bootstrap轮播：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 -->

Bootstrap carousel 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;
}

Answer 1

只需使用：

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

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

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

1 个答案: