HTML/CSS - 无法将移动文本段落置于图像顶部的中心

Question

我想在图片上方放置两个移动的文本段落。虽然我成功地将顶部段落居中放置在图像的中心，但我无法使用相同的 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;}
}

Answer 1

我会尝试在 .second 和 .second 跨度元素上添加边距：auto 属性：

.second {
    ...
    margin: auto
}
.second span {
    ...
    margin: auto
}

margin: auto css 属性用于水平居中元素。更多信息可以在 here 上找到（W3 学校 CSS 保证金 - 自动值）

注意：在这种情况下，:last-of-type 伪选择器在这里并不是必需的，因为只有一个 .second 元素。 :first-of-type 伪选择器也是如此。

HTML/CSS - 无法将移动文本段落置于图像顶部的中心

HTML/CSS - Having trouble centering the moving text paragraph on top of the image

html

css

center

alignment