引导垂直对齐在col答案

【问题标题】：Bootstrap vertical-align in col引导垂直对齐在col
【发布时间】：2015-11-09 18:37:19
【问题描述】：

我想在 Bootstrap col“welcome-container”中垂直和水平对齐文章“welcome-text”。我看过很多关于这个话题的其他讨论。不幸的是，当我按照这些步骤操作时，我失去了我的特殊背景（带有颜色叠加的图像）

overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(15, 32, 59, 0.9);
  padding: auto;
  margin: auto;
}
.img-overlay {
  position: relative;
  float: left;
  padding-bottom: 0;
}
.welcome {
  display: table;
}
.welcome-container {
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 5;
}
.welcome-text {
  width: 100%;
  font-family: 'Raleway', Sans-Serif;
  font-weight: 800;
  font-size: 3.5em;
  text-transform: uppercase;
  position: absolute;
  display: table-cell;
  vertical-align: middle;
}
.welcome-text-white {
  display: inline;
  color: #fff;
}
.welcome-text-orange {
  display: inline;
  color: #e28634;
}

<div class="row">
  <div class="col-sm-12 col-md-7 col-lg-8 welcome-container">
    <div class="img-overlay img-responsive ">
      <img class="img-responsive welcome-img" src="http://placehold.it/1920x1080" alt="">
      <div class="overlay">
        <div class="welcome">
          <arcticle class="welcome-text">
            <p class="welcome-text-white">the</p>
            <p class="welcome-text-orange">#awesome</p>
            <br>
            <p class="welcome-text-white">master</p>
            <p class="welcome-text-white">is back</p>
          </arcticle>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-12 col-md-5 col-lg-4 news-container"></div>
</div>

感谢支持

【问题讨论】：

呃，你能把图像显示出来吗？发布到某个主机并使用上面的链接（这不是本地主机，所以看不到您的图像）
完成。但我认为它不能正常工作。因为这个片段中没有包含引导程序。

标签： twitter-bootstrap vertical-alignment col

【解决方案1】：

我想我可以按照你的意愿使文本居中 ver 和 hoz，只需要像这样修改一点 css

.overlay { /*---You forgot to include "." before class name of your post, not sure you have miss it in your css file or not---*/
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(15, 32, 59, 0.9);
  padding: auto;
  margin: auto;
  text-align:center; /*---New attr for this class---*/
}
.welcome {
  display: table;
  width:100%; /*---New attr for this class---*/
  height:100%; /*---New attr for this class---*/
}
.welcome-text {
  width: 100%;
  font-family: 'Raleway', Sans-Serif;
  font-weight: 800;
  font-size: 3.5em;
  /*position:absolute;*/ /*---Remove this attr---*/
  text-transform: uppercase;
  display: table-cell;
  vertical-align: middle;
}

这里有一个site，你可以测试 Boostrap，非常好（包括很多东西）。
希望这能解决您的问题！

【讨论】：