为什么我不能使用 bootstrap 垂直对齐我的项目？

Question

I am working on a windsurf website right now.我现在正在一个风帆冲浪网站上工作。 The problem I have here is, although I've added the justify-content-center, align-items-center, and text-center classes, the h1 and h2 are still on the top.我在这里遇到的问题是，虽然我添加了 justify-content-center、align-items-center 和 text-center 类，但 h1 和 h2 仍然位于顶部。 They aligned horizontally but not vertically.它们水平对齐但不是垂直对齐。 Please help.请帮忙。 My website looks like this right now:我的网站现在看起来像这样： HTML: HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- My Css -->
    <link rel="stylesheet" href="styles.css">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Noto+Serif+Gujarati:wght@200;300;400&family=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/1e90402f09.js" crossorigin="anonymous"></script>
    <!-- Logo -->
    <link rel="shortcut icon" href="images/logo.ico" type="image/x-icon">
    <title>Bojark Windsurf</title>
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Bojark Windsurf</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="#">Ana Sayfa</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Paketlerimiz</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Hakkımızda</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Top Part -->
    <section id="top">
        <div class="container-fluid p-5 text-center addbg">
            <div class="row justify-content-center align-items-center">
                <div class="col-12">
                    <h1>Bojark Windsurf</h1>
                </div>
                <div class="row justify-content-center align-items-center">
                    <div class="col-12">
                        <h2>Bambaşka Bir Deneyime Hazır Mısın?</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="test">
        <h1>Test</h1>
        <p>calismiycak</p>
    </section>
    <!-- Bootstrap JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>
</body>

</html>

CSS: CSS：

body {
    background-color: #B1B2FF;
    font-family: 'Poppins', sans-serif;
}

.navbar-brand,
.nav-link {
    color: white;
}


.addbg {
    background-image: url("images/24.jpg");
    height: 660px;
    background-size: cover;
}

#top h2 {
    font-family: 'Noto Serif Gujarati', serif;
    letter-spacing: 0.8px;
    color: white;
}

/* font-family: 'Noto Serif Gujarati', serif;
font-family: 'Poppins', sans-serif; */

Answer 1

Just add d-flex and align-items-center to that element.只需将d-flex和align-items-center添加到该元素即可。

 <section id="top">
        <div class="container-fluid d-flex align-items-center p-5 text-center addbg">
           ..........................................
        </div>
</section>

为什么我不能使用 bootstrap 垂直对齐我的项目？

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-10-07 10:46:05

为什么我不能使用 bootstrap 垂直对齐我的项目？

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-10-07 10:46:05

解决方案1
1 已采纳 2022-10-07 10:46:05