全页div

时间:2016-07-10 16:43:02

标签: html css twitter-bootstrap css3

尝试将一些文本居中放在覆盖整个页面的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>

0 个答案:

没有答案