Центрирование собственного созданного div-класса отзывчивым - PullRequest
Новая
       7

Центрирование собственного созданного div-класса отзывчивым

0 голосов
/ 26 апреля 2019

Я пытаюсь центрировать мой <div class="loginfeld">, но не могу заставить его двигаться по центру (в середине), оставаясь отзывчивым. 

<html>
    <body>
        <div class ="loginfeld"> 
        <div class="container">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div class="jumbotron">

                    <center><h1>Hallo!</h1></center>
                    <br>

                    <form action="login.php" method="POST">
                    <div class="form-group">
                    <input type="text" class="form-control" name="benutzername"
                    placeholder="Benutzernamen eingeben">

                    </div>

                    <div class="form-group">
                    <input type="text" class="form-control" name="passwort"
                    placeholder="Passwort eingeben">

                    </div>

                    <button type="text" class="btn
                    btn-primary form-control" name ="login">Login</button>
                    <center><p><?php echo $hinweis; ?></p></center>
                    </form>
                </div>
            </div>
            <div class="col-lg-4"></div>    
        </div>
        </div>
    </body>
</html>

В моем файле в стиле css: 

.loginfeld{
    margin-top: 250px;
    margin-left: 750px;
    max-width: 1000px;
}

Это идет в середине моего экрана, но на самом деле это не Resposive.Я пытался использовать коды, которые были написаны на форуме, чтобы адаптивно центрировать его, но у меня это не сработало.

Вот так это выглядит сейчас, после того, как я использовал код, записанный K_LUN.Это centerd, но теперь окно входа в систему перепутано.Thats how it looks now, after I used the code K_LUN wrote down. It is centerd, but now the login box is messed up.

Ответы [ 3 ]

0 голосов
/ 26 апреля 2019

Я не знаю, хотите ли вы, чтобы он находился точно в центре экрана (например, слева, справа, сверху, снизу) или только в горизонтальном центре.

Для горизонтального центра вы можете просто сделать- 

.parent-element{
    background: lightblue;
    width: 300px;
    height: 300
}
.centered-element{
  margin: auto;
  width: 200px;
  height: 200px;
  background: cyan;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
<div class="parent-element">
  <div class="centered-element">
      Sample Text
  </div>
</div>
0 голосов
/ 26 апреля 2019

Bootstrap предоставляет более чем достаточно классов для достижения того, что вам нужно с минимальным пользовательским CSS.

Я удалил дополнительные col-lg-4, которые были у вас в начале и в конце контейнера; также добавлен row div, поскольку у вас должно быть col-* классов только внутри строки.

После этого вы можете просто добавить justify-content-center к строке для центрирования элемента, а также align-items-center вместе с настраиваемым свойством height: 100vh, чтобы строка использовала полную высоту области просмотра. 

.full-scrn {
  height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row justify-content-center align-items-center full-scrn">
      <div class="col-10 col-md-8 col-lg-4">
        <div class="jumbotron">

          <center>
            <h1>Hallo!</h1>
          </center>
          <br>

          <form action="login.php" method="POST">
            <div class="form-group">
              <input type="text" class="form-control" name="benutzername" placeholder="Benutzernamen eingeben">

            </div>

            <div class="form-group">
              <input type="text" class="form-control" name="passwort" placeholder="Passwort eingeben">

            </div>

            <button type="text" class="btn
                    btn-primary form-control" name="login">Login</button>
            <center>
              <p>
                <?php echo $hinweis; ?>
              </p>
            </center>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>
0 голосов
/ 26 апреля 2019

Вы можете использовать смещения сетки для центрирования столбца: 

<div class="container">
  <div class="col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
    <div class="jumbotron">
      <h1 class="text-center">Hallo!</h1>

      <form action="login.php" method="POST">
        <div class="form-group">
          <input type="text" class="form-control" name="benutzername" placeholder="Benutzernamen eingeben">

        </div>

        <div class="form-group">
          <input type="text" class="form-control" name="passwort" placeholder="Passwort eingeben">

        </div>

        <button type="text" class="btn
                    btn-primary form-control" name="login">Login</button>
          <p class="text-center">
            <?php echo $hinweis; ?>
          </p>
      </form>
    </div>
  </div>
</div>

Демонстрация

Обратите внимание на несколько вещей:

  • Используйте text-center вместо дополнительной разметки для центрирования
  • Не используйте разрывы строк для пробелов.Использовать CSS (.jumbotron h1 {margin-bottom: 20px;})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...