我无法将我的文字移到页面中间

时间:2017-06-28 05:51:21

标签: html css

我无法将.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;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

每个元素都有一个容器。

例如我们有:

&#13;
&#13;
userDeviceIdKey
&#13;
getToken()
&#13;
&#13;
&#13;

您必须确定项目大小(宽度和高度)

答案 1 :(得分:0)

最好在代码中尝试使用以下示例。

.middle {
   margin-left:auto;
   margin-right:auto;
   padding:50%;
            }
<div class="middle">
<p>Text</P>
</div>

答案 2 :(得分:0)

您必须声明内容的宽度以使其居中。试试这个解决方案

&#13;
&#13;
.middle{
margin-left:auto;
position: relative;
display:block;
margin-right:auto;
width:25%}
&#13;
<div class="middle">
<p>content</P>
</div>
&#13;
&#13;
&#13;