Блог

Главная - Вопросы по программированию - Как переместить эту форму начальной загрузки 4 по вертикали в центр экрана?

Как переместить эту форму начальной загрузки 4 по вертикали в центр экрана?

#html #twitter-bootstrap #css #bootstrap-4

#HTML #twitter-bootstrap #css #bootstrap-4

Вопрос:

Мы пытаемся переместить знак в форме с карточкой в центр экрана по вертикали, но проблема в том, что он остается в верхней части экрана.

HTML

 <div class="container-fluid form">
    <div class="row">
        <div class="col-md-12  close-form">
            <a href="/" class="btn btn-circle button-image closeButton float-right"></a>
        </div>
    </div>
    <div class="row form-row ">
        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto signinform">
            <div class="card card-signin my-5">
                <div class="card-body">
                    <h5 class="card-title text-center">Sign In</h5>
                    <div>
                        <div id="errorMsg" *ngIf="errorMessage">
                            <span>{{errorMessage}}</span>
                        </div>
                        <form action="" [formGroup]="SigninForm" (ngSubmit)="signinUser()">
                            <div class="form-group form-signin">
                                <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="Username"
                                    type="text" id="username" formControlName="username" />

                            </div>
                            <div class="form-group form-signin">
                                <input class="form-control form-control-lg" placeholder="Password" type="password"
                                    formControlName="password" />
                            </div>
                            <div class="form-group form-signin">
                                <div class="extra-btns align-items-center">
                                    <a href="/request-reset-password" class="btn btn-link ">Forget password</a>
                                    <a href="/sign-up" class="btn btn-link ">Sign Up</a>
                                </div>
                                <div>
                                    <button type="submit" class="  btn form-btn btn-lg btn-block submit-btn">
                                        Sign In
                                        With Email
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

css

 :root {
  --input-padding-x: 1.5rem;
  --input-padding-y: .75rem;
}

.container-fluid {
    height: 150%;
    overflow: hidden;
    background: #FF512F; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
    background-size: cover;
    background-position: bottom;
    margin: 0px;
}

.container-fluid {
  height: 100vh;
}
    .container-fluid.form.signup {
        background-size: cover;
        background-attachment: fixed;
        height: 100%;
    }
.card.card-signin.my-5,
.card.card-signup.my-5 {
 /* background-color: rgba(255, 255, 255, 0.6); */
  margin: 0 auto;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
  align-items: center;
  display: flex;
  margin-top:0px
}

Мы используем Bootstrap 4 с Angular. Как можно устранить эту проблему? Как мы можем переместить форму входа в систему, переместив ее карточку в центр экрана по вертикали?

Ответ №1:

Это связано с тем, что высота .row или .row-form , содержащая карточку входа, по умолчанию установлена в соответствии с размером дочернего содержимого.

Укажите .form-row значение высоты 100% .form-row {height:100%} . Только один класс. Надеюсь, это поможет. Попробуйте фрагмент.

 :root {
  --input-padding-x: 1.5rem;
  --input-padding-y: .75rem;
}

.container-fluid {
    height: 150%;
    overflow: hidden;
    background: #FF512F; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
    background-size: cover;
    background-position: bottom;
    margin: 0px;
}

.container-fluid {
  height: 100vh;
}
    .container-fluid.form.signup {
        background-size: cover;
        background-attachment: fixed;
        height: 100%;
    }
.card.card-signin.my-5,
.card.card-signup.my-5 {
 /* background-color: rgba(255, 255, 255, 0.6); */
  margin: 0 auto;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
  align-items: center;
  display: flex;
  margin-top:0px
}

.form-row {
  height: 100%;
} 
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid form">
    <div class="row">
        <div class="col-md-12  close-form">
            <a href="/" class="btn btn-circle button-image closeButton float-right"></a>
        </div>
    </div>
    <div class="row form-row ">
        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto signinform">
            <div class="card card-signin my-5">
                <div class="card-body">
                    <h5 class="card-title text-center">Sign In</h5>
                    <div>
                        <div id="errorMsg" *ngIf="errorMessage">
                            <span>{{errorMessage}}</span>
                        </div>
                        <form action="" [formGroup]="SigninForm" (ngSubmit)="signinUser()">
                            <div class="form-group form-signin">
                                <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="Username"
                                    type="text" id="username" formControlName="username" />

                            </div>
                            <div class="form-group form-signin">
                                <input class="form-control form-control-lg" placeholder="Password" type="password"
                                    formControlName="password" />
                            </div>
                            <div class="form-group form-signin">
                                <div class="extra-btns align-items-center">
                                    <a href="/request-reset-password" class="btn btn-link ">Forget password</a>
                                    <a href="/sign-up" class="btn btn-link ">Sign Up</a>
                                </div>
                                <div>
                                    <button type="submit" class="  btn form-btn btn-lg btn-block submit-btn">
                                        Sign In
                                        With Email
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Ответ №2:

Вот решение, использующее flex :

 html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;  
}

.close-button-container {
  text-align: right;
  padding: .5rem;
  font-size: .75rem;
}

.form-container {
  background: #e6e6e6;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-card {
  border-radius: 10px;
  background: #fff;
  padding: 25px;
} 
 <body>
<div class="content">
    <div class="close-button-container">
        x Close
    </div>
    <div class="form-container">
        <div class="form-card">
            <h3>Login</h3>
            <div>
                <input type="text" placeholder="username" />
            </div>
            <div>
                <input type="password" placeholder="password" />
            </div>
            <div>
                <button>
                    Login
                </button>
            </div>
        </div>
    </div>
</div>
</body>

Это то, что делает код:

Устанавливает height: 100% как для вашего html , так и body для тегов. Это позволит вам растягиваться div.content , заполняя всю страницу по вертикали.

После этого мы хотим, чтобы кнопка закрытия имела фиксированную высоту, и давайте div.form-container возьмем то, что осталось от страницы.

В соответствии с css-хитростями:

[flex-grow] определяет способность элемента flex расти при необходимости. Он принимает значение без единицы, которое служит пропорцией. Это определяет, какой объем доступного пространства внутри контейнера flex должен занимать элемент.

Если для всех элементов установлено значение flex-grow равным 1, оставшееся пространство в контейнере будет распределено поровну между всеми дочерними элементами. Если один из дочерних элементов имеет значение 2, оставшееся пространство будет занимать в два раза больше места, чем остальные (или, по крайней мере, попытается).

Итак, установка flex: 1 (сокращение для flex-grow: 1 ) только для одного тега подскажет браузеру растянуть этот единственный тег и заполнить оставшееся пространство контейнера.

Теперь все, что осталось, это указать div.form-container место div.form-card в его центре; как по вертикали, так и по горизонтали. Это достигается с align-items: center помощью и justify-content: center .

Метки: