时间戳

首页 > 解决方案 > Bootstrap 4.1 中以横向为中心的垂直对齐问题

html - Bootstrap 4.1 中以横向为中心的垂直对齐问题

问题描述

在横向中，我的垂直对齐集中（屏幕中央的卡片）有问题，它会剪切各种信息，例如我的图像（徽标）...

“问题”出h-100在MAIN 标签、CONTAINER和ROW中。

但是我不知道为什么会出现这种方向的问题，因为我正在关注引导文档，我知道解决此问题的唯一方法是使用@media queries，但这会“错误”笔记本的其他分辨率和电脑。..

我应该怎么做，为什么会出现这个问题？

CSS：

html,
body { height: 100%; }

HTML：

<main class="h-100">
    <div class="container h-100">
        <div class="row justify-content-center align-items-center h-100">
            <div class="col-12">
                <div class="card mx-auto d-block shadow-md-large w-md-80 w-lg-50">
                    <div class="card-header bg-transparent border-0 py-md-5">
                        <img src="/img/logo/aliansce_full.svg" alt="Aliansce Shopping Centers" class="CLI img-fluid mx-auto d-block" autocomplete="on" autofocus require>
                    </div>
                    <div class="card-body px-md-5">
                        <form autocomplete="on">
                            <div class="form-group EGLF mt-4 mt-md-0">
                                <input type="text" id="FLUI" class="form-control FI EFLI border-top-0 border-right-0 border-left-0 rounded-0 shadow-none" autocomplete="on" autofocus required>
                                <!-- FLOAT LABEL EFFECT -->
                                <label fo="FLUI" id="FLUL" class="EFL">Usuário</label>
                                <span class="EFHL"></span>
                                <span class="EFBL"></span>
                                <!-- FRONTEND RESPONSE ERROR MESSAGE -->
                                <div id="FBMEU" class="FBMEU ml-1 text-danger"></div>
                            </div>
                            <div class="form-group EGLF mt-4">
                                <input type="password" id="FLUPI" class="form-control FI EFLI border-top-0 border-right-0 border-left-0 rounded-0 shadow-none" min="1" maxlength="10" required>
                                <!-- FLOAT LABEL EFFECT -->
                                <label for="FLUPI" id="FLUPL" class="EFL">Senha</label>
                                <span class="EFHL"></span>
                                <span class="EFBL"></span>
                                <!-- FRONTEND RESPONSE ERROR MESSAGE -->
                                <div id="FBMEUP" class="ml-1 text-danger"></div>
                            </div>
                            <div class="form-group mt-5">
                                <button type="button" id="FBSL" class="btn btn-primary w-esm-100 mb-2 px-lg-5">LOGIN</button>
                                <button type="button" class="btn bg-light w-esm-100 px-lg-5">VOLTAR</button>
                            </div>
                        </form>
                        <!-- BACKEND RESPONSE ERROR MESSAGE -->
                        <div class="text-center text-danger">
                            Usuário ou senha incorretos.
                            <br> Caso esteja com dificuldades, clique em "Precisa de Ajuda?".
                        </div> 
                    </div>
                    <div class="card-footer bg-white border-0">
                        <button type="button" class="btn btn-link mx-auto d-block">Precisa de Ajuda?</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

在此处输入图像描述 在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

我假设您想将卡对齐在两个轴的中心。如果是这样，这可能会解决您的问题。

没有必要使用网格布局，因为您只有一个card. 此外，您最好不要更改display. card就这样吧。

main在元素 上使用以下类
  • d-flex
  • flex-column改变其方向，使其内容保持其内在属性，例如width.
  • 由于它的方向是 now column，使用它来垂直居中justify-content-center对齐它的内容。否则，您将使用.align-items-center

添加一个新d-flex元素并在其上使用以在中心水平justify-content-center对齐其内容。

添加另一个block元素并w-md-80 w-lg-50在其上使用。

https://codepen.io/anon/pen/jQQrog

推荐阅读