css定位我的定位有问题

我是web开发的新手，我在定位方面遇到了一个小问题，我放置了一个包含内容的

元素，所有的单词都在抱怨，而不是在一行中。有人能帮我解决问题吗。到目前为止，定位一直是我的一个大问题，所以如果你们知道任何来源，我可以了解更多关于css定位的信息

@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');
@import url('https://fonts.googleapis.com/css?family=Poiret+One');
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
.intro {
	height: 100%;
	width: 100%;
	margin: auto;
	display: table;
	top: 0;
	background-size: cover;
	background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: none;
}
.content {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}
.content h1 {
	font-family: "Yantramana";
	font-size: 600%;
	font-weight: 100;
	color: #E1EFE9;
	line-height: 70%;
}
.btn{
	font-family: "montserrat";
	font-size: 135%;
	font-weight: 400;
	color: orange;
	text-transform: uppercase;
	text-decoration: none;
	border: solid #ffffff;
	padding: 10px 20px;
	border-radius: 9px;
	transition: all 0.7s;
}
.btn:hover {
	color: #CBDFD6;
	border: solid #CBDFD6;
}
.about-us{
	height:100%;
	width: 100%;
	margin: auto;
	display: table;
	background-color: #ffffff;
	background-size: cover;
	position: relative;
}
.ab-content {
	font-family: "Poiret One";
	font-weight: lighter;
	position: absolute;
	font-size: 150%;
	left: 50%;
	transform: translateX(-50%);
}
.ab-p{
	position: absolute;
	top: 10%;
	left: 50%;
	font-weight: lighter;
	transform: translateX(-50%);
	font-family: "montserrat";
}
.color {
	color:orange;
}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
	
}

<!DOCTYPE html>
<html>    
<head>
	<title>Full Screen Landing Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<link href="css/animate.css" rel="stylesheet"/>
	<link href="css/waypoints.css" rel="stylesheet"/>
	<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
	<script src="js/waypoints.js" type="text/javascript"></script>
</head>
<body>
	<section class="intro">
		<div class="inner">
			<div class="content">
				<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
					<h1>Find <span class="color">Your</span> Taste!</h1>
				</section>
				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
					<a class="btn" href="#">Get Started</a>
			</div>
		</div>
	</section>
	<section class="about-us">
		<div class="ab-inner">
			<div class="ab-content">
				<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
					<h2 class="center">Our Mission</h2>
					<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
						<p class="ab-p">Our mission is to provide the best food ingedients.</p>
			</div>
		</div>
	</section>
</body>
</html>

"Relative"position"关联位置，这样可以避免混乱。

.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}

我想您希望"我们的使命"部分居中且可读。

.ab-p {
font-weight: lighter;
font-family: "montserrat";
text-align: center;
}
h2 {
text-align: center;
}

建议：除非你绝对需要，否则不要使用position:absolute，因为这条规则会将元素从浏览器的自动定位中删除，这意味着你可以完全控制它的位置

相关内容

最新更新

热门标签：