Question

因此，我有一个简单的网站，其中包含导航栏，页脚和垂直居中的容器，我在其中尝试放置一些欢迎文本和几个按钮。由于某些原因，我无法将不同的元素（文本和按钮）拆分为新的行。我想在第一行有一些文本，然后在下一行有2个按钮。

我不确定我是否将欢迎容器正确地居中，所以如果不正确，请告诉我。

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Home</title>

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet" >
        <link href="assets/css/style.css" rel="stylesheet">
    </head>

    <body>
        <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar bg-dark">
            <a class="navbar-brand mr-0 mr-md-2" href="./">Website</a>
            <div class="navbar-nav-scroll">
                <ul class="navbar-nav bd-navbar-nav flex-row">
                    <li class="nav-item">
                        <a class="nav-link" href="./">Home</a>
                    </li>
                </ul>
            </div>
        </header>

        <main>
            <div class="container-fluid welcome-container">
                <div>Welcome to the website!</div>
                <br/>
                <a class="btn btn-dark" href="./">Button 1</a>
                <a class="btn btn-dark" href="./">Button 2</a>
            </div>
        </main>

        <footer class="footer bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="text-center text-white">Footer</div>
                    </div>
                </div>
            </div>
        </footer>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    </body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
}

.welcome-container {
    min-height: 80%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-pack: center;
}

任何帮助将不胜感激。预先感谢。

Answer 1

html {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
}

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>Home</title>

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet" >
            <link href="assets/css/style.css" rel="stylesheet">
        </head>

        <body>
            <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar bg-dark">
                <a class="navbar-brand mr-0 mr-md-2" href="./">Website</a>
                <div class="navbar-nav-scroll">
                    <ul class="navbar-nav bd-navbar-nav flex-row">
                        <li class="nav-item">
                            <a class="nav-link" href="./">Home</a>
                        </li>
                    </ul>
                </div>
            </header>

            <main>
                  <section class= "jumbotron text-center">
                <div class="container">
                    <p>Welcome to the website!</p>
                    <p>
                    <a class="btn btn-dark" href="./">Button 1</a>
                    <a class="btn btn-dark" href="./">Button 2</a>
                    </p>
                </div>
                </section>
            </main>

            <footer class="footer bg-dark">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="text-center text-white">Footer</div>
                        </div>
                    </div>
                </div>
            </footer>

            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        </body>
    </html>

检查解决方案

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <title>Home</title>

            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" rel="stylesheet" >
            <link href="assets/css/style.css" rel="stylesheet">
        </head>

        <body>
            <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar bg-dark">
                <a class="navbar-brand mr-0 mr-md-2" href="./">Website</a>
                <div class="navbar-nav-scroll">
                    <ul class="navbar-nav bd-navbar-nav flex-row">
                        <li class="nav-item">
                            <a class="nav-link" href="./">Home</a>
                        </li>
                    </ul>
                </div>
            </header>

            <main>
                  <section class= "jumbotron text-center">
                <div class="container">
                    <p>Welcome to the website!</p>
                    <p>
                    <a class="btn btn-dark" href="./">Button 1</a>
                    <a class="btn btn-dark" href="./">Button 2</a>
                    </p>
                </div>
                </section>
            </main>

            <footer class="footer bg-dark">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="text-center text-white">Footer</div>
                        </div>
                    </div>
                </div>
            </footer>

            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        </body>
    </html>

Answer 2

一个朋友帮助了我。我要做的就是将welcome容器的内容放在一个单独的div中，然后使用text-align：center向该div添加一个类。

垂直居中的Boostrap容器问题

2 个答案: