Bootstrap col 垂直对齐

Question

我想在 Bootstrap 列 "welcome-container" 中垂直和水平对齐文章 "welcome-text"。我已经看到很多关于这个话题的其他讨论。不幸的是，当我按照这些步骤操作时，我丢失了我的特殊背景（带颜色叠加的 img）

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>

感谢支持

Answer 1

好吧，我想我可以像你想要的那样让文本既是中心版本又是 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，非常好（包括很多东西）。
希望这可以解决您的问题！

Bootstrap col 垂直对齐

Bootstrap vertical-align in col

twitter-bootstrap

vertical-alignment

col