Bootstrap flex 項目不能垂直居中

Question

我試圖在<main>中將項目居中，但<h1>和<h3>元素之間存在間隙（我無法弄清楚原因）。 有人可以幫助弄清楚為什么會出現這種差距嗎？ TIA

它完全對齊，所以可能我在修復導航欄時搞砸了，第一個版本不再工作了。 我還檢查了頁面，它沒有顯示這些項目之間的任何內容，它們都在<main>中，但它們之間沒有任何內容。

<!DOCTYPE html>

<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- adding Google fonts-->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto&display=swap" rel="stylesheet">
        <!-- adding bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
        <link href="/static/favicon.ico" rel="icon">
        <link href="/static/index.css" rel="stylesheet">
        <title>{% block title %}Welcome{% endblock %}</title>
    </head>

    <body>
        <nav class="navbar navbar-light container-fluid d-flex align-items-top justify-content-start">
            <a class="navbar-brand" href="/"><img href="index.html" src="/static/ladybug.png" width="30" height="30" class="d-inline-block align-left" alt=""></a>
            <a class="navbar-brand" href="/login">Login</a>
            <a class="navbar-brand" href="/register">Register</a>
        </nav>
        {% block main %}
        <main class="container-fluid d-flex align-items-center justify-content-center h-100 w-100">
                <div class="row align-items-center h-100">
                    <h1 class="text-center col-12">Need help with debug your code?</h1>
                    <section class="text-center col-12">
                        <h3 class="d-inline-flex p-2"><strong>Find a study mate to solve problems quicker</strong></h3>
                        <div>
                            <center><hr></center>
                        </div>
                        <button type="button" class="btn btn-danger">Join Us Today!</button>
                    </section>
                </div>
        </main>
        {% endblock %}

        <footer class="row footer">
            <p class="text-center col-12 ">EDX Harvard | CS50 2019 | Final Project</p>
        </footer>
    </body>
</html>

我主要使用引導程序，但在這里我的 css

body,
html
{
    margin: 0;
    width: 100%;
    height: 100%;
    background: url(/static/images/girl_2.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.navbar-brand
{
    font-family: 'Anton', sans-serif;
    font-size: 3vmin;
}

h1
{
    padding: 0px;
    font-family: 'Anton', sans-serif;
    font-size: 6vmin;
    margin: 0;
    color: #295696;
    text-shadow: 0.1vmin 0.1vmin #6f8bb3;
}

h3
{
    font-family: 'Roboto', sans-serif;
    font-size: 3vmin;
    padding: 10px;
    color: #fec345;
    background-color: #295696;
}

hr
{
    border-color: #eb3461;
    border-width: 3px;
    max-width: 90px;
    margin: 10px;
}

以及我無法弄清楚的差距的屏幕截圖：

Answer 1

<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- adding Google fonts-->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Anton&family=Roboto&display=swap" rel="stylesheet">
        <!-- adding bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
        <link href="/static/favicon.ico" rel="icon">
        <link href="/static/index.css" rel="stylesheet">
        <title>{% block title %}Welcome{% endblock %}</title>
    </head>

    <body>
        <nav class="navbar navbar-light container-fluid d-flex align-items-top justify-content-start">
            <a class="navbar-brand" href="/"><img href="index.html" src="/static/ladybug.png" width="30" height="30" class="d-inline-block align-left" alt=""></a>
            <a class="navbar-brand" href="/login">Login</a>
            <a class="navbar-brand" href="/register">Register</a>
        </nav>
        {% block main %}
        <div class="container-fluid d-flex align-items-center justify-content-center h-100 w-100">
            <div class="row justify-content-center">
                <header class="text-center col-12">
                    <h1><strong>Need help with debug your code?</strong></h1>
                </header>
                <section class="text-center col-12">
                    <h3 class="d-inline-flex p-2"><strong>Find a study mate to solve problems quicker</strong></h3>
                    <div>
                        <center><hr></center>
                    </div>
                    <button type="button" class="btn btn-danger">Join Us Today!</button>
                </section>
            </div>
        </div>
        {% endblock %}

        <footer class="row footer">
            <p class="text-center col-12 ">EDX Harvard | CS50 2019 | Final Project</p>
        </footer>
    </body>
</html>

Bootstrap flex 項目不能垂直居中

問題描述

1 個解決方案

解決方案1
0 2020-12-19 21:09:57

Bootstrap flex 項目不能垂直居中

問題描述

1 個解決方案

解決方案1 0 2020-12-19 21:09:57

解決方案1
0 2020-12-19 21:09:57