尝试将一些文本居中放在覆盖整个页面的div中。我做的任何水平调整都很好,但垂直调整要么不起作用,要么将文本推到页面中心下方。
.home{
max-width:100%;
height:100%;
text-align:center;
background:url(desktop_1.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.home .text{
height:100%;
width:100%;
}
.home .text h1{
vertical-align:middle;
}
<div class="home">
<div class="container">
<div class="text">
<h1> MOSTACK </h1>
<h2> Lorem ipsum dolor sit amet </h2>
<a href=#> ENTER SITE </a>
</div>
</div>
</div>
明白这可能看起来像其他帖子上的双重尝试解决方案,但没有一个正在运作
编辑解决 使用以下css
.home{
width:100%;
height:100%;
text-align:center;
background:url(desktop_1.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.home .text{
max-width:100%;
height:50%;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.home .text h1{
font-family:'Raleway', sans-serif;
padding-top:30px;
padding-bottom:100px;
font-size:60px;
color:black;
max-width:100%;
height:40%;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.home .text a{
text-decoration:none;
padding-top:100px;
font-size:20px;
color:black;
max-width:100%;
height:0%;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="home">
<div class="text">
<h1> MOSTACK </h1>
<a href="l"> ENTER SITE </a>
</div>
</div>