Question

我希望纵向和横向对齐文章＆＃34; welcome-text＆＃34;在Bootstrap col＆＃34; welcome-container＆＃34;。我已经看到很多关于这个话题的其他谣言。不幸的是，当我按照这些步骤操作时，我会松开我的特殊背景（img with color-overlay）

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

支持

Answer 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，非常好（包含很多东西）希望这可以解决你的问题！

col中的Bootstrap vertical-align

1 个答案: