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

标签 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>

最佳答案

每个元素都有一个容器。

例如我们有这个:

.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/

相关文章:

HTML 表单 : Datalist Option Tag Text is not showing in Chrome

jquery - 通过悬停在 materializecss 中的激活器来打开卡片显示内容

javascript - 设置固定高度后宽度和高度相等

css - 如何在CSS中从头到尾显示基于单词的字符串

javascript - Div 响应所有设备 Ionic

html - CSS 每 5 张图像后没有边距

php - 填充一系列 div-

css - 如何使用 CSS 显示/隐藏删除按钮?

css - 在新机器上克隆元素后,twitter bootstrap rails CSS 未加载

html - 即使在调整窗口大小时,如何在图像顶部保持 div(文本框)的相同位置?