HTML/CSS - Having trouble centering the moving text paragraph on top of the image
Question
I am trying to place two moving text paragraphs on top of the image. Although I successfully centered the top paragraph in the center of the image, I somehow cannot center the bottom paragraph with the same CSS elements as shown below:
I have tried many different ways of changing the CSS elements, but I am not exactly sure what the issue is.
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;}
}
FULL 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>
FULL 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 answers
solution1
1 ACCPTED 2020-12-14 23:37:06
I would try adding a margin: auto property on both the.second and.second span elements:
.second {
...
margin: auto
}
.second span {
...
margin: auto
}
The margin: auto css property is used to horizontally center an element. More info can be found on the here (W3 schools CSS Margin - the auto value)
NOTE: In this case the:last-of-type pseudo selector isn't really necessary here as there is only one.second element. The same is true for the:first-of-type pseudo selector.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Having trouble centering an image in CSS
HTML CSS Centering part of text inside a paragraph
Moving text to top of paragraph/center next to image
Having trouble moving my css image slider
I am having trouble with centering the heading of a paragraph
Having trouble aligning an image with link and text via html and css
Having trouble centering div in CSS
Trouble centering text and image
HTML & CSS Centering Text and Image Together
HTML + CSS for Centering Vertical Text next to an Image
Related Tags