我正在尝试将网站名称定位在页面的左上角。我在foodies.com中拥有页面的名称，在CSS中我使用了position：relative;。前10名％;左：10％;但它显示在页面中间附近。有没有人有任何解决方案。我真的在定位上苦苦挣扎
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;
}
.name{
position: absolute;
top: 10%;
left: 0%;
}
.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: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
text-align: center;
font-weight: lighter;
font-family: "montserrat";
}
h2{
text-align: center;
}
h3{
text-align: center;
font-family: "montserrat";
}
.ab-2p{
font-family:"montserrat";
font-size: 22px;
margin: 10px 10px;
}
ul {
display: flex;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
ul li {
list-style-type: none;
}
ul li a {
width: 80px;
height: 80px;
margin: 0 50px;
text-align: center;
font-size: 35px;
line-height: 80px;
display: block;
border: 3px solid orange;
border-radius: 50%;
color: orange;
position: relative;
overflow: hidden;
}
ul li a .fab{
position: relative;
color: orange;
transition: .5s;
}
ul li a:hover .fab {
transform: rotateY(360deg);
}
.color {
color:orange;
}<!DOCTYPE html>
<head>
<title>Foodies</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>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<section class="intro">
<div class="inner">
<h1 class="name">Foodies<span class="blue">.com</span></h1>
<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"><span class="color">Our Mission</span></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>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<h3 class="ab-content"><span class="color">About</span></h3>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".6s">
<p class="ab-2p">Cooking is all about people. Food is maybe the only universal thing that really has the power to bring everyone together. No matter what culture, everywhere around the world, people get together to eat.Cooking is like snow skiing: If you don't fall at least 10 times, then you're not skiing hard enough.The fast-food industry is in very good company with the lead industry and the tobacco industry in how it tries to mislead the public, and how aggressively it goes after anybody who criticizes its business practices.The problem is when that fun stuff becomes the habit. And I think that's what's happened in our culture. Fast food has become the everyday meal.</p>
<h3 class="ab-content"><span class="color">Soical Media</span></h3>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
</section>
</body>
</html>
答案 0 :(得分：0)
我将修改同时包含inner和name的{{1}}容器
使容器在中间不对齐
content使用边距将标题和内容推入正确的位置
.intro .inner {
vertical-align: initial;
}
希望这更接近您想要的布局。