Горизонтальная и вертикальная центрированная карта на начальной загрузке 4 - PullRequest
Новая
       2

Горизонтальная и вертикальная центрированная карта на начальной загрузке 4

0 голосов
/ 04 декабря 2018

У меня проблемы с центрированием карты (или контейнера).Я могу центрировать его горизонтально, но не вертикально.Я уже протестировал некоторый код, найденный в стеке и на других веб-страницах, но, похоже, он не работает.Мой текущий код: 

<div class="container col-md-3 py-5">
    <div class="card">
        <div class="card-header">
            <h3 class="mb-0">Login</h3>
        </div>
        <div class="card-body">
            <form class="form">
                <div class="form-group">
                    <label for="username">Username:</label> <input  class="form-control" type="text" name="username" id="username" autofocus required >
                </div>
                <div class="form-group">
                    <label for="password">Password: </label> <input class="form-control" type="password" name="user" id="password" required>
                </div>
             </form>
        </div>
    </div>
</div>

Ответы [ 3 ]

0 голосов
/ 04 декабря 2018

Я считаю, что приведенный ниже код должен работать для вас, просто попробуйте и проверьте 

.container.py-5{
    position: absolute; //or relative
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
0 голосов
/ 04 декабря 2018

Добавьте d-flex align-items-center классы начальной загрузки на body и установите его высоту на 100vh;

body{
  height:100vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body class="d-flex align-items-center">
    <div class="container col-md-3 py-5">
        <div class="card">
            <div class="card-header">
                <h3 class="mb-0">Login</h3>
            </div>
            <div class="card-body">
                <form class="form">
                    <div class="form-group">
                        <label for="username">Username:</label> <input  class="form-control" type="text" name="username" id="username" autofocus required >
                    </div>
                    <div class="form-group">
                        <label for="password">Password: </label> <input class="form-control" type="password" name="user" id="password" required>
                    </div>
                 </form>
            </div>
        </div>
    </div>
</body>
0 голосов
/ 04 декабря 2018

[ИСПЫТАНО - работает] Используйте flexbox.https://www.bootply.com/AaDqw82aFL#

Оберните ваш код дополнительным div с классом, содержащим следующие два правила стиля. 

display: flex;
align-items: center;
justify-content: center; 
align-conten:center; 
min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
min-height: 100vh;

Это должно работать нормально.

Полный код со встроенным стилем (Iрекомендуем использовать класс вместо style атрибута: 

  <div style=" display: flex; align-items: center; justify-content: center; align-conten:center; min-height: 100%;  /* Fallback for browsers do NOT support vh unit */min-height: 100vh;">
  <div class="container col-md-3 py-5" style="height: 200px; width:200px">
    <div class="card">
        <div class="card-header">
            <h3 class="mb-0">Login</h3>
        </div>
        <div class="card-body">
            <form class="form">
                <div class="form-group">
                    <label for="username">Username:</label> <input class="form-control" type="text" name="username" id="username" autofocus="" required="">
                </div>
                <div class="form-group">
                    <label for="password">Password: </label> <input class="form-control" type="password" name="user" id="password" required="">
                </div>
             </form>
        </div>
    </div>
</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...