Question

我正在为一个Electron应用程序制作一个非常简单的表单，我正在尝试使用该软件，但是，我仍然坚持最基本的东西......界面设计。

我正在使用Bootstrap 4作为我的界面，我试图将表格垂直居中，但是，我正在使用针对同一主题的其他问题提出的各种建议来获得混合结果。它们要么不起作用，要么将我的所有内容都压缩到一行，并且通常会弄乱当前的布局。

有关如何垂直对齐下方容器中的项目的任何建议吗？

<!-- Search Field -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-auto">
            <h1 class="text-white">Shorten M' URL!</h1>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-sm-6">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Enter URL...">
                <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Shorten!</button>
        </span>
            </div>
        </div>
    </div>
</div>

Answer 1

你在找这个吗？：

＆＃13;

.vh-100 {
    height: 100vh;
}

＆＃13;

<div class="container vh-100 bg-dark">
    <div class="row vh-100 justify-content-center align-items-center">
        <div class="col-6 text-center">
            <h1 class="text-white">Shorten M' URL!</h1>
            <br>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Enter URL...">
                <span class="input-group-btn">
                    <button class="btn btn-primary" type="button">Shorten!</button>
                </span>
            </div>
        </div>
    </div>
</div>
        
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

＆＃13;

基本上你必须让容器适合屏幕高度。在那里，您可以垂直对齐它们。

Bootstrap 4垂直对齐不起作用

1 个答案: