Question

我是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>

Answer 1

“相对”“位置”与位置相关，因此可以避免混乱。

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

Answer 2

我认为您希望“我们的使命”部分居中且可读。

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

h2 {
    text-align: center;
}

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

CSS定位我在定位方面有问题

2 个答案: