我无法成功使用“行垂直对齐”。引导程序/HTML答案

【问题标题】：I'm unable to sucsessfully use "row vertical-align". Bootstrap/HTML我无法成功使用“行垂直对齐”。引导程序/HTML
【发布时间】：2020-04-07 09:32:21
【问题描述】：

我正在创建一个登录页面（Python/Flask），登录表单将是该页面上显示的唯一元素。我希望该表格水平和垂直居中。我设法将它水平居中，但我无法弄清楚垂直对齐。

我找到了这个有用的答案 -> vertical-align with Bootstrap 3，但我的大脑无法理解它。

我也不确定我是否正确引用了 main.css 文件，并且完全不确定如何引用 main.css 中的容器以垂直对齐。

我的文件结构：

________________________________
|Flask -
|      |_flask_app.py
|      |_static_
|               |_css_
|                     |_main.css
|               |_images_
|                        |...
|      |_templates_
|                  |_index.html
|                  |_login.html
________________________________

这是我的 HTML：

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

    <head>
        <title>LoginPage</title>
        <meta charset="utf-8">

        <!-- For rendering and touch zooming -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="container">
            <div class="row vertivcal-align">
                <div class="col-xs-12"></div>
                    <div class="span12 text-center">
                        <h1>Please login</h1>
                        <br>
                        <form action="" method="post">
                            <input type="text" placeholder="Username" name="username" value="{{
                            request.form.username }}">
                            <input type="password" placeholder="Password" name="password" value="{{
                            request.form.password }}">
                            <input class="btn btn-default" type="submit" value="Login">
                        </form>
                        {% if error %}
                            <p class="error"><strong>Error:</strong> {{ error }}
                        {% endif %}
                    </div>
                </div>    
            </div>
        </div>
    </body>
</html>

这是我的 main.css

.container {
    width: 1200px;
    margin: 0 auto;
  }

.vertical-align {
    display: flex;
    align-items: center;
}

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

您可以使用以下 CSS 并将类 m-auto 添加到您的 div span12

.vertical-align {
    height:100vh
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">
        <div class="row vertical-align">
            <div class="col-xs-12"></div>
                <div class="span12 text-center m-auto">
                    <h1>Please login</h1>
                    <br>
                    <form action="" method="post">
                        <input type="text" placeholder="Username" name="username" value="">
                        <input type="password" placeholder="Password" name="password" value="">
                        <input class="btn btn-default" type="submit" value="Login">
                    </form>
                </div>
            </div>    
        </div>

【讨论】：

德拉戈谢谢你的回答。我添加了 m-auto 并将 main.css 更改为包含 height:100vh，不幸的是登录表单仍然位于页面顶部而不是中心。 imgur.com/5V4HHY3
当您检查时，您可以看到带有垂直对齐的行占用了 100% (100vh) 的高度？（确保 css 实际工作）
希望我的回答和代码 sn-p 帮助您解决问题！如果是，您介意验证我的回答并支持吗？ :) 编码快乐！
再次感谢您的回答，对不起，我住的地方已经很晚了。当我检查时，我看不到垂直对齐高度在哪里，所以我无法判断它是否占用 100%。这是行垂直对齐：imgur.com/1Cej9th，这里是容器本身：imgur.com/sfVyUUn 我想我只是跳过了基础知识并进入了深水区，因此我不知道我在做什么。我将重新审视基础知识。
不用担心 :) 你的 CSS 没有激活，也许你没有正确调用它。你可以这样做，所以它无论如何都会工作：而不是<div class="row vertical-align">，使用<div class="row" style="height:100vh">