我无法将.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>
&#13;
答案 0 :(得分:0)
每个元素都有一个容器。
例如我们有:
userDeviceIdKey
&#13;
getToken()
&#13;
您必须确定项目大小(宽度和高度)
答案 1 :(得分:0)
最好在代码中尝试使用以下示例。
.middle {
margin-left:auto;
margin-right:auto;
padding:50%;
}
<div class="middle">
<p>Text</P>
</div>
答案 2 :(得分:0)
您必须声明内容的宽度以使其居中。试试这个解决方案
.middle{
margin-left:auto;
position: relative;
display:block;
margin-right:auto;
width:25%}
&#13;
<div class="middle">
<p>content</P>
</div>
&#13;