我是 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>最佳答案
“相对”“位置”是指位置，这样可以避免困惑。
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
关于javascript - css 定位 我在定位时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53400360/