此页面的主要h1
和p
标签拒绝居中。我是一个新的学习者,它可能是我所忽略的简单事物;但我不能把手指放在它上面!
我已经尝试了多种方法将这一点(.content
和.header
,甚至*
)设置为text-align: center;
,但没有任何效果。甚至*
!所以必须有一些东西"阻止"此?
提前感谢您提供的任何提示!
*{
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.v-header{
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-wrap video {
min-width: 100%;
min-height: 100%;
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.55;
}
.content {
z-index: 2;
}
.content h1 {
font-size: 50px;
margin-bottom: 0px;
}
.content p {
font-size: 25px;
display: block;
padding-bottom: 20px;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 15px;
padding: 15px 20px;
text-decoration: none;
}
.section {
padding: 20px 0px;
}
.section-b {
background: #34b3a0;
color: #fff;
}
@media(max-width: 960px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Container section will contain the entire landing page -->
<header class= "v-header container">
<!-- Video-Wrap section will contain the video -->
<div class= "video-wrap">
<video src="images/media2.mp4" autoplay="true" loop="true"></video>
</div>
<!-- Overlay section will be over the video, styled with CSS -->
<div class= "overlay"> </div>
<!-- Content will contain the actual content on the landing page with links to other pages -->
<div class="content">
<h1>Coffee R Us</h1>
<p>If you like coffee, you'll love us!</p>
<a href="#" class= "btn">About us</a>
<a href="#" class= "btn">Our Menu</a>
</div>
</header>
<!-- Sections will appear BELOW the wrapper video -->
<section class="section-a">
<div>
<h1>Section A - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
<section class="section-b">
<div>
<h1>Section B - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
</body>
</html>
&#13;
答案 0 :(得分:0)
将margin: 0 auto;
添加到.content
以使其居中 - 这是包装所有这些文本的元素,并且它不会跨越整个窗口宽度,因此您必须将其居中。
*{
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.v-header{
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-wrap video {
min-width: 100%;
min-height: 100%;
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.55;
}
.content {
z-index: 2;
margin: 0 auto;
}
.content h1 {
font-size: 50px;
margin-bottom: 0px;
}
.content p {
font-size: 25px;
display: block;
padding-bottom: 20px;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 15px;
padding: 15px 20px;
text-decoration: none;
}
.section {
padding: 20px 0px;
}
.section-b {
background: #34b3a0;
color: #fff;
}
@media(max-width: 960px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Container section will contain the entire landing page -->
<header class= "v-header container">
<!-- Video-Wrap section will contain the video -->
<div class= "video-wrap">
<video src="images/media2.mp4" autoplay="true" loop="true"></video>
</div>
<!-- Overlay section will be over the video, styled with CSS -->
<div class= "overlay"> </div>
<!-- Content will contain the actual content on the landing page with links to other pages -->
<div class="content">
<h1>Coffee R Us</h1>
<p>If you like coffee, you'll love us!</p>
<a href="#" class= "btn">About us</a>
<a href="#" class= "btn">Our Menu</a>
</div>
</header>
<!-- Sections will appear BELOW the wrapper video -->
<section class="section-a">
<div>
<h1>Section A - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
<section class="section-b">
<div>
<h1>Section B - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
</body>
</html>
答案 1 :(得分:0)
添加content
width:100%
全宽
*{
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.v-header{
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-wrap video {
min-width: 100%;
min-height: 100%;
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.55;
}
.content {
z-index: 2;
width:100%;
}
.content h1 {
font-size: 50px;
margin-bottom: 0px;
}
.content p {
font-size: 25px;
display: block;
padding-bottom: 20px;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 15px;
padding: 15px 20px;
text-decoration: none;
}
.section {
padding: 20px 0px;
}
.section-b {
background: #34b3a0;
color: #fff;
}
@media(max-width: 960px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
}
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Container section will contain the entire landing page -->
<header class= "v-header container">
<!-- Video-Wrap section will contain the video -->
<div class= "video-wrap">
<video src="images/media2.mp4" autoplay="true" loop="true"></video>
</div>
<!-- Overlay section will be over the video, styled with CSS -->
<div class= "overlay"> </div>
<!-- Content will contain the actual content on the landing page with links to other pages -->
<div class="content">
<h1>Coffee R Us</h1>
<p>If you like coffee, you'll love us!</p>
<a href="#" class= "btn">About us</a>
<a href="#" class= "btn">Our Menu</a>
</div>
</header>
<!-- Sections will appear BELOW the wrapper video -->
<section class="section-a">
<div>
<h1>Section A - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
<section class="section-b">
<div>
<h1>Section B - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
</body>
</html>
&#13;
答案 2 :(得分:0)
你的问题是,即使你的文本在div的中心,你的div本身并没有使用所有可用的宽度,所以你最终在错放的容器中有一个居中的文本。
从那里,您有2个解决方案来修复您的.content
CSS:
margin: auto;
width: 100%;
答案 3 :(得分:0)
.content {width:100%}在.content class
上添加100%的宽度答案 4 :(得分:0)
问题是您将.content
元素( .v-header
)的容器设为display:flex
。这使得.content
元素仅占用其内容所需的空间(它不再扩展到容器的100%)。
现在您需要添加justify-content:center
以将整个框与中心对齐。
*{
box-sizing: border-box;
text-align: center;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.v-header{
height: 100vh;
display: flex;
align-items: center;
color: #fff;
justify-content:center;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-wrap video {
min-width: 100%;
min-height: 100%;
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #225470;
z-index: 1;
opacity: 0.55;
}
.content {
z-index: 2;
}
.content h1 {
font-size: 50px;
margin-bottom: 0px;
}
.content p {
font-size: 25px;
display: block;
padding-bottom: 20px;
}
.btn {
background: #34b3a0;
color: #fff;
font-size: 15px;
padding: 15px 20px;
text-decoration: none;
}
.section {
padding: 20px 0px;
}
.section-b {
background: #34b3a0;
color: #fff;
}
@media(max-width: 960px) {
.container {
padding-right: 30px;
padding-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- Container section will contain the entire landing page -->
<header class= "v-header container">
<!-- Video-Wrap section will contain the video -->
<div class= "video-wrap">
<video src="images/media2.mp4" autoplay="true" loop="true"></video>
</div>
<!-- Overlay section will be over the video, styled with CSS -->
<div class= "overlay"> </div>
<!-- Content will contain the actual content on the landing page with links to other pages -->
<div class="content">
<h1>Coffee R Us</h1>
<p>If you like coffee, you'll love us!</p>
<a href="#" class= "btn">About us</a>
<a href="#" class= "btn">Our Menu</a>
</div>
</header>
<!-- Sections will appear BELOW the wrapper video -->
<section class="section-a">
<div>
<h1>Section A - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
<section class="section-b">
<div>
<h1>Section B - Thing 1</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laborum veniam quae non nesciunt enim deleniti soluta molestias molestiae dolorem.</p>
</div>
</section>
</body>
</html>