gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:29:48 24 4
gpt4 key购买 nike

我无法将 .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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com