php - 将引导表单设置为居中

Question

所以我有这个简单的 Bootstrap 登录页面

<?php
    include 'include/global.php';
    include 'include/function.php';

if (isset($_GET['action']) && $_GET['action'] == 'index') {

?>

        $('title').html('Login');

        function login_selectuser(device_name, sn) {

            $("#button_login").attr("href","finspot:FingerspotVer;"+$('#select_scan').val())

        }
    </script>

    <div class="row">
        <div class="col-md-4">

        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="user_name">Username</label> 
                <select class="form-control" onchange="login_selectuser()" id='select_scan'>
                    <option selected disabled="disabled"> -- Select Username -- </option>
                        <?php               
                            $strSQL = "SELECT a.* FROM demo_user AS a JOIN demo_finger AS b ON a.user_id=b.user_id";
                            $result = mysql_query($strSQL);

                            while($row = mysql_fetch_array($result)){

                                $value = base64_encode($base_path."verification.php?user_id=".$row['user_id']);

                                echo "<option value=$value id='option' user_id='".$row['user_id']."' user_name='".$row['user_name']."'>$row[user_name]</option>";
                            }               
                        ?>
                </select>
            </div>
            <a href="" id="button_login" type="submit" class="btn btn-success">Login</a>
        </div>
        <div class="col-md-4">

        </div>
    </div>

问题是表单位置在页面顶部..我想把我的表单放在页面中间...你们能帮我解决这个问题吗？

Answer 1

这个问题本质上是 this question 的重复.

要使表单垂直居中，您需要使用标准的 CSS 垂直居中。 Bootstrap 没有开箱即用的垂直内容居中类。

也就是说，您可以使用 Jumbotron 等功能让您在引导方式中取得很好的进展。

jumbotron 只会给你一个很好的框架结构来包装你的表单，然后你需要应用 flexbox(仍然没有普遍支持，但非常干净)或传统的 CSS 方法来垂直居中，这是很远的hackier，但得到更好的支持。

就个人而言，无论是在 bootstrap 内部还是外部，我都使用了 Chris Coyier 的方法并从中受益。

首先，确保您确实有一个表单标签包裹了您的整个表单。

然后在您的 .form-group 元素上放置一个自定义类。

然后你可以应用这个:

我使用的非flexbox方式是:

form.FORM_TAG_WRAPPER_CLASS {
  position: relative;
}
.FORM_GROUP_CUSTOM_CLASS {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

flexbox 的方式是这样的:

form.FORM_TAG_WRAPPER_CLASS {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

这些方法和更多方法是 documented here .