0

I want to vertical and horizontal align the article "welcome-text" in Bootstrap col "welcome-container". I've seen a lot of other discousions about this topic. Unfortunately, when I follow those steps I loose my special-background (img with color-overlay)

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>

thx for support

4

1 回答 1

0

好吧，我想我可以像你想要的那样使文本居中 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;
}

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

于 2015-08-17T09:07:52.057 回答