我正在构建一个随机报价生成器：http : //codepen.io/Kestvir/pen/peqjZZ，并且在执行 html/css 部分时，我遇到了内容问题，即在透明背景内. 调整窗口大小时，内容会移到右侧，并且看起来不再是居中的，而实际上是居中的。如果我删除背景 ( margin: 0 150px;)的边距，则此问题不再存在，但透明背景会变得与整个窗口一样宽。我怀疑这是因为我的<div class="quote-bckgr">在容器之外，但我这样做了，因为我不知道如何将我的内容与容器内提到的 div 类居中，而不是现在的样子，因为它被粘在了容器的最顶部这页纸。我应该如何修复向右移动的文本和按钮，而不是看起来居中？
我想这就是你想要的。我在容器和行 div 中添加了边距，添加了背景颜色和边框半径，并将其从其他类中删除。
<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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句