Question

我正在构建一个随机引用生成器：http://codepen.io/Kestvir/pen/peqjZZ，在做html / css部分事情时，我遇到了内容问题，即透明背景内部。调整窗口大小时，内容将向右侧移动，并且当它实际存在时，它看起来不再是居中的。如果我删除背景的边距（margin: 0 150px;），则此问题不再存在，但透明背景变得与整个窗口一样宽。我怀疑这是因为我的<div class="quote-bckgr">在容器之外，但是我这样做了，因为我不知道，如何将我的内容与所提到的div类放在容器内，而不是如何现在，因为它被困在页面的最顶端。我该如何修正向右移动的文本和按钮，而不是看中心？

Answer 1

我认为这就是你想要的。我在容器和行div中添加了边距，添加了背景颜色和边框半径，并将其从其他类中删除。

codepen

    <body>
      <div class="quote-bckgr">
        <div class="container">
          <div class="row">
            <div class="new-margin">
              <div class="col-sm-12">
                <h1> Welcome to CIV5 random quote generator!</h1>
                <div id="quotation"></div>
                <div id="author"></div>
              </div>

              <div class="row">
                <div class= "col-md-3 col-md-offset-3">
                  <a href="#" id="twitter" class="btn" target="_blank"> <i class="fa fa-twitter" aria-hidden="true"></i>Tweet This Quote</a>
                </div>
                <div class="col-md-3">
                  <a href="#" id="newQuote" class="btn" target="_blank">New Quote</a>
                </div>          
              </div>

            </div>
          </div>
        </div>
      </div>
    </body>

和css

.quote-bckgr {
      color: #fff;
      text-align: center;
      position: relative;
      top: 50%;
      margin: 0 auto;
      transform: translatey(-50%);
      overflow: hidden;
    }
    .new-margin{
      margin:0 155px;
      background-color: rgba(25, 0, 0, .45);
      border-radius:5px;
    }

调整浏览器大小时的中心内容将转到页面的右侧

1 个答案: