在Bootstrap轮播中对齐文本或图像

Question

我使用Bootstrap 3.3.4，我想知道哪种方式更好地对齐轮播中的文本或项目。

这是滑块的示例。如何对齐这样的文本并保持在同一位置的任何屏幕分辨率。我使用top: x, right: x，但每当我调整窗口大小时，文字都会爬到上方而不再停留在中间位置。

CSS for align

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 40%;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

只是基本的自举滑块。但是，如果我使用底部40％的例子来提升文本在页面中间工作。但是，如果我使用较小的显示器，文本会上升并保持在最顶层。

在此exemple文本中，每个设备都会保留。

Answer 1

<div class="wrap">
    <div class="display-table">
        <div class="display-cell">
           <h1>Title in here</h1>
        </div>
    </div>
</div>

<style>
.wrap {
    width:            100%;
    height:           400px;
}
.display-table {
    width:            100%;
    height:           100%;
    display:          table;
}
.display-cell {
    width:            100%;
    height:           100%;
    display:          table-cell;
    vertical-align:   middle;
}
</style>

这允许固定的垂直对齐，并且应该跨浏览器工作。请注意，必须存在应用于.wrap的固定高度，以便让孩子继承100％的高度！

希望这会有所帮助：）

Answer 2

希望，试试这个在Bootstrap轮播中垂直居中文字的演示。

以下是 Fiddle 。

我在这里所做的就是给div一个包含文本的高度，然后用这个CSS定位...

.vcenter {
    position: absolute;
    height:100px;
    width:100%;
    top:50%;
    bottom:50%;
    margin-top: -50px; 
    margin-bottom: -50px;
}