我无法将 .intro .inner
移动到中间,所以我的文字在中间。请帮助我如何将我的内容移动到中间。它只是卡在左上角,不会随着我添加的 CSS 移动。
@import url("https://fonts.googleapis.com/css?family=Lato" rel="stylesheet");
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/images/landing-screen.png);
display:table;
top: 0;
background-size: cover;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
padding-left: 100px;
text-align: center;
padding-bottom: 28%;
}
/*---Media Queries---*/
@media screen and (max-width: 900px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jamshid Ebadi's Portolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta Charset='uft-8'>
<link rel='shortcut icon' href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/images/favicon.png">
<link rel="stylesheet" href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/index.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.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/animate.css" rel="stylesheet"/>
<link href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/waypoints.css" rel="stylesheet"/>
<script src="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/waypoints.js" type="text/javascript"></script>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="pulse" data-os-animation-delay="0s">
<h1> Animate Easy</h1>
</section>
<section class="os-animation" data-os-animation="pulse" data-os-animation-delay="1s">
<a class="btn" href="#">Get Started</a>
</section>
</div>
</div>
</section>
</body>
<html>
最佳答案
每个元素都有一个容器。
例如我们有这个:
.item {
position: absolute;
top: 50%;
left: 50%;
margin-top: -height_size/2;
margin-left: -width_size/2;
}
<div class="container">
<div class="item"></div>
</div>
您必须确定元素大小(宽度和高度)
关于html - 我无法将我的文字移动到页面中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44794557/