Question

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

尝试过一系列组合，让旋转木马中的项目文本在中间垂直对齐。

对于最有意义的技术，文本从页面中消失了！？

<div class="box10 border">
  <div class="questions">
    <div id="questions-carousel" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="item active">
          <div class="middleContainer">
            <div class="middle">
              <div class="question">...text here...</div>
            </div>
          </div>
          </div><!-- /item -->
        <div class="item">
          <div class="middleContainer">
            <div class="middle">
              <div class="question">...text here...</div>
            </div>
          </div>
        </div><!-- /item -->
      </div><!-- /carousel-inner -->
    </div><!-- /carousel -->
  </div><!-- /questions -->
</div><!-- /box10 -->

这是css，这是使用相对+绝对表100％+ table-cell 50％vertical-align技术：

.box10 {
  height:20%;
  overflow-x: auto;
  position: relative;
}
.questions {
  margin-left: 4%;
  margin-right: 4%;
  position: relative;
  height: 100%;
}
.middleContainer {
  position: relative;
}
.middle {
  position: absolute;
  display: table;
  height: 100%;
  width: 100%;
}
.question {
  height: 50%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 1.4vw;
  letter-spacing: .03em;
  font-style: italic;
}

Answer 1

如果没有：

，则无法在其容器中垂直对齐文本

使用flexbox
修复文本容器的高度
仅将文字限制为一行

每个“解决方案”都有其缺点，所以你必须做出妥协。例如，使用Flexbox，您可以在此处看到一些浏览器支持：http://caniuse.com/flexbox

Answer 2

您可以延长this solution以满足您的需求。

.questions:after {
    content: "";
    height: inherit;
    display: inline-block;
    vertical-align: middle;
}
.carousel {
    display: inline-block;
    vertical-align: middle;
}

vertical-align：middle; div在bootstrap carousel？

2 个答案: