HTML/CSS - 在图像顶部居中移动文本段落时遇到问题
[英]HTML/CSS - Having trouble centering the moving text paragraph on top of the image
问题描述
我正在尝试在图像顶部放置两个移动的文本段落。 尽管我成功地将顶部段落居中在图像的中心，但不知何故我无法使用相同的 CSS 元素将底部段落居中，如下所示：
我尝试了许多不同的方法来更改 CSS 元素，但我不确定问题是什么。
HTML：
<div class = "design">
<img src="Photos/child.jpg" alt="Child" style="width:100%; height:auto;">
<div class = "second_design">
<div class="first">Vancouver-based</div>
<div class="second"><span>professional Child Behavioural Interventionist</span></div>
</div>
</div>
CSS
.design {
position: relative;
text-align: center;
background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
font-family: 'Roboto';
font-weight: 300;
font-size: 15px;
/*padding-top: 20vh;*/
height: 100vh;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
}
.second_design {
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.first:first-of-type {
animation: showup 7s infinite;
position: absolute;
left: 0;
right: 0;
top: 30px;
text-align: center;
}
.second:last-of-type {
width: 0px;
animation: reveal 7s infinite;
position: absolute;
left: 0;
right: 0;
top: 25px;
text-align: center;
}
.second:last-of-type span {
/*margin-left: -355px;*/
animation: slidein 7s infinite;
position: absolute;
left: 0;
right: 0;
top: 25px;
/*text-align: center;*/
}
@keyframes showup {
0% {opacity: 0;}
20% {opacity: 1;}
80% {opacity: 1;}
100% {opacity:0;}
}
@keyframes slidein {
0% {margin-left: -800px;}
20% {margin-left: -800px;}
35% {margin-left: 0px;}
100% {margin-left: 0px;}
}
@keyframes reveal {
0%
{opacity: 0; width: 0px;}
20%
{opacity: 1; width: 0px;}
30% {width: 300px;}
80% {opacity: 1;}
100%
{opacity: 0; width: 300px;}
}
全 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jinny YJ Hong</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "body">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Submain.html">Jinny YJ Hong</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div class = "navigation">
<ul class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="Submain.html">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Expertise <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Practice</a></li>
<li><a href="#">Region</a></li>
</ul>
</li>
<li><a href="Information.html">Resources</a></li>
<li><a href="About.html">About</a></li>
</ul>
</ul>
</div>
</div>
</div>
</nav>
<div class = "design">
<img src="Photos/child.jpg" alt="Child" style="width:100%; height:auto;">
<div class = "second_design">
<div class="first">Vancouver-based</div>
<div class="second"><span>professional Child Behavioural Interventionist</span></div>
</div>
</div>
</div>
</body>
</html>
全 CSS
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
height: 1000px;
overflow: hidden;
}
.banner {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.banner video {
position: absolute;
top: 0;
left: 0;
object-fit: cover;
width: 100%;
height: 100%;
pointer-events: none;
}
.banner .content {
pointer-events: relative;
z-index: 1;
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.banner .content h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
text-transform: uppercase;
color: #fff;
}
.button {
display: inline-flex;
height: 10px;
padding-top: 100px;
cursor: pointer;
}
/* Submain.html */
.navbar {
background: white !important;
padding: 1em 2em 0em 2em;
font-family: Georgia, 'Times New Roman', Times, serif;
border: none !important;
}
.navbar-brand {
color: #292929 !important;
font-size: 1.em !important;
font-family: "Roberto", sans-serif !important;
}
.navigation li {
border-color: none !important;
font-family: "Roboto", sans-serif !important;
}
.navigation a {
background: none !important;
color: black !important;
background-clip: none !important;
font-size: 1.0em !important;
}
.navigation a:hover {
background-color: #E2E0E0 !important;
color: black !important;
background-clip: none !important;
}
/*Sliding Effect */
.design {
position: relative;
text-align: center;
background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
font-family: 'Roboto';
font-weight: 300;
font-size: 15px;
/*padding-top: 20vh;*/
height: 100vh;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
}
.second_design {
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.first:first-of-type {
animation: showup 7s infinite;
position: absolute;
left: 0;
right: 0;
top: 30px;
text-align: center;
}
.second:last-of-type {
width: 0px;
animation: reveal 7s infinite;
position: absolute;
left: 0;
right: 0;
top: 25px;
text-align: center;
}
.second:last-of-type span {
/*margin-left: -355px;*/
animation: slidein 7s infinite;
position: absolute;
left: 0;
right: 0;
top: 25px;
/*text-align: center;*/
}
@keyframes showup {
0% {opacity: 0;}
20% {opacity: 1;}
80% {opacity: 1;}
100% {opacity:0;}
}
@keyframes slidein {
0% {margin-left: -800px;}
20% {margin-left: -800px;}
35% {margin-left: 0px;}
100% {margin-left: 0px;}
}
@keyframes reveal {
0%
{opacity: 0; width: 0px;}
20%
{opacity: 1; width: 0px;}
30% {width: 300px;}
80% {opacity: 1;}
100%
{opacity: 0; width: 300px;}
}
1 个解决方案
解决方案1
1 已采纳 2020-12-14 23:37:06
我会尝试在 the.second 和 .second span 元素上添加一个 margin: auto 属性：
.second {
...
margin: auto
}
.second span {
...
margin: auto
}
margin: auto css 属性用于水平居中元素。 更多信息可以在这里找到（W3 学校 CSS 保证金 - 自动值）
注意：在这种情况下，:last-of-type 伪选择器在这里并不是真正需要的，因为只有 one.second 元素。 对于:first-of-type 伪选择器也是如此。
在CSS中将图片居中时遇到问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.