将文本向下对齐

小编典典

将文本向下对齐

javascript

我在标题中说明了我的问题。我想将容器（ID 约为）div 放在图像下方。我尝试了很多方法，但现在我的大脑被烧毁了：DI认为这与位置有关。如果您能提供帮助，我将非常高兴。提前致谢。（注意：我将使设计响应接近完成。如果您在 1920x1080 屏幕上工作，您将获得最佳结果。）

我的代码：

window.addEventListener("scroll", function(){
    var header = document.querySelector("nav");
    header.classList.toggle("sticky",window.scrollY > 0);
})
.fs-xl {
    font-size: 3rem;
}

.about{
    position: absolute;
}

.loginbutton {
    border: transparent;
    background-color: transparent;
    display: block !important;
}

.gotham-ultra {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    transform: translate(-50%, 85%) !important;
}

.mainpageanimate {
    animation: mpa 1s ease-in-out forwards;
    animation-delay: 1s;
    opacity: 0;
}

.navbar {
    transition: 0.25 ease;
}

.sticky {
    background-color: #f8f9fa !important;
}


.sticky .container-fluid .collapse ul li a {
    color: #212529 !important;
}

.sticky .container-fluid .collapse ul li .loginbutton {
    display: none !important;
}

@keyframes mpa {
    0% {
        transform: translateY(70px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }

}
<!DOCTYPE html>
<html>

<head>
    <title>Yottalogy - Ana Sayfa</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="img/icon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="http://fonts.cdnfonts.com/css/montserrat">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body class="bg-dark">

    <nav id="header" class="navbar navbar-dark navbar-expand-lg fixed-top">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" ria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor01">
                <ul class="navbar-nav me-auto mx-auto my-1">
                    <li class="nav-item mx-3">
                        <a class="nav-link text-light" aria-current="page" href="#">Ana Sayfa</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link text-light" href="#">Dersler</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link text-light" href="#">Blog</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link text-light" href="#">Forum</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link text-light" href="#">Destek</a>
                    </li>
                </ul>
                <ul class="navbar-nav position-absolute end-0 me-5">
                    <li class="nav-item mx-3">
                        <button type="button" class="nav-link text-light loginbutton">Giriş Yap</button>
                    </li>
                    <li class="nav-item">
                        <button type="button" class="btn btn-success">Hesap Aç</button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <img src="https://cdn.statusqueen.com/desktopwallpaper/thumbnail/city-Hd_4k_desktop_wallpaper_photos-512.jpg" class="img-fluid opacity-50 position-absolute">

    <div class="position-relative mainpageanimate">
        <p class="fs-xl text-light text-center position-absolute top-50 start-50 gotham-ultra">BİLGİNİN
            EFENDİSİ OLMAK İÇİN ÇALIŞMANIN UŞAĞI OLMAK GEREKİR.</p>
    </div>

    <div id="about" class="container about">
        <div class="row">
            <div class="col-4">
                <img src="" alt="">
            </div>
            <div class="col-8">
                <h1 class="text-light">Lorem Ipsum</h1>
                <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet nisi nec lorem dictum
                    pellentesque. Integer semper risus tortor, in ornare nisi interdum nec. Cras sit amet orci eros.
                    Pellentesque pulvinar suscipit turpis, nec sodales turpis tincidunt quis. Integer a ipsum a ligula
                    pharetra maximus sed placerat lectus. Curabitur euismod a est vitae malesuada. Phasellus elementum
                    eleifend risus, non porttitor sapien dictum mattis.</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
    </script>

</body>

</html>

阅读 115

2022-07-26

共1个答案

小编典典

您的页面中有很多位置绝对元素似乎不需要它。

将图像作为背景并删除所有绝对定位样式。

您可以使用 flex 代替居中元素。

此外，如果您希望某些部分成为屏幕的全高，则为此使用 100vh。

这样做，所有让你头疼的问题都会消失。

另外，如果您是初学者，请尝试从头开始创建一些页面以了解事情的工作原理，而不是从模板开始。

2022-07-26