0

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>

サポートのためのthx

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 に答える