我有一个简单的HTML代码:
section.cta, section.cta2, section.cta3, section.cta4 {
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
padding: 250px 0;
}
section.cta .cta-content, section.cta2 .cta2-content, section.cta3 .cta3-content, section.cta4 .cta4-content {
position: relative;
z-index: 1;
}
section.cta .cta-content h2, section.cta2 .cta2-content h2, section.cta3 .cta3-content h2, section.cta4 .cta4-content h2 {
margin-top: 0;
margin-bottom: 25px;
color: black;
max-width: 450px;
font-size: 50px;
}
section.cta .cta-content p {
color: black;
max-width: 450px;
font-size: 20px;
}
section.cta {
background-image: url('https://cdn1.tnwcdn.com/files/2011/08/bliss.jpg');
}
@media (min-width: 768px) {
section.cta .cta-content h2, section.cta2 .cta2-content h2, section.cta3 .cta3-content h2, section.cta4 .cta4-content h2 {
font-size: 80px;
}
}
section.cta .overlay {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
}
<section class="cta">
<div class="cta-content">
<div class="container">
<h2>this is header</h2>
<p>this is some other text.</p>
</div>
</div>
<div class="overlay"></div>
</section>
结果是一个页面背景很好,文字左边对齐。
基本上文字看起来像这样:
| this is header |
| this is some other text. |
当用户全屏查看网页时,它位于背景的最左侧。我想更改它,以便文本可见如下:
| this is header |
| this is some other text |
我该怎么做?
我的jsfiddle在这里:
答案 0 :(得分:3)
从ExecutorService
和max-width
移除h2
。
将一类p
添加到容器中。
答案 1 :(得分:2)
您可以添加引导类 text-center
来居中元素内的所有文本。
.container
的更新HTML将如下
<div class="container text-center">
<h2>this is header</h2>
<p>this is some other text.</p>
</div>
请阅读docs以了解有关 Bootstrap对齐类的更多信息
答案 2 :(得分:1)
将“text-center”类添加到容器div。
<section class="cta">
<div class="cta-content">
<div class="container text-center">
<h2>this is header</h2>
<p>this is some other text.</p>
</div>
</div>
<div class="overlay"></div>
</section>
答案 3 :(得分:0)
你可以简单地使用css将它在所有后续代码的中心对齐到你的css
h2{
text-align:center;
}
p{
text-align:center;
}