исправить положение в div css - PullRequest
Новая
       19

исправить положение в div css

0 голосов
/ 02 февраля 2020

Я новичок в css и я действительно не могу исправить все так, как хочу ... Как я могу выровнять вертикаль h1 по отношению к началу формы пользователя? но самая важная проблема для меня заключается в том, что я не могу правильно расположить чек и ссылку, я хочу, чтобы они располагались один над другим и были сосредоточены в div. Я не уверен, хорошо ли я разместил div, но я хочу, чтобы он был в центре, но не слишком низко на странице. спасибо всем! 

body {
    text-align: left;
    background-image: url("img/lemon.jpg");
    color: #1b1b1b;
}

input[type=text],
input[type=password]{
    width: 65%;
    display: table;
    margin: 0 auto;
    padding: 12px 20px;
    border: none;
    border-bottom: 1px solid darkgray;
    background-color: #e9e9e9;
    box-sizing: border-box;
    margin-bottom: 7px;
    resize: vertical;
}

h1 {
    font-size: x-large;
}
h2 {
    font-size: x-large;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 7px 20px;
    width: 65%;
    height: 20%;
    display: table;
    margin: 0 auto;
    border: none;
    cursor: pointer;
    background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    background-color: #3d94f6;
    border: 1px solid #337fed;
    cursor: pointer;
    color: #ffffff;
    font-size: 17px;

    text-decoration: none;
    text-shadow: -1px 1px 1px #1570cd;
}

button:hover {
    background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
    background-color: #1e62d0;
}

button:active {
    position: relative;
    top: 1px;
}

.container {
    width: 35%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    margin-top: 7%;
    background-color: white;
    box-shadow: 2px 2px 11px rgb(11, 11, 11);
    -webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
    -moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
    overflow: hidden;
}

#check {
    display:block;
    margin-top: 7px;
}

span.frgt {
    margin-top: 7px;
    display: block;  
}
a {
    text-decoration: none;
    color: #1e62d0;
}
img {
    width: 100%;
    height: auto;
    opacity: 0.4;
}
<!DOCTYPE html>
<head>
</head>
<body>
    <div class="container">
        <h1>Login</h1>
        <input type="text" placeholder="Username" name="uname" required>
        <input type="password" placeholder="password" name="psw" required>
        <button type="submit">Login</button>
        <hr>
        <label id="check">
            <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
        <span class="frgt">forgot <a href="#">password?</a></span>
    </div>
</body>
</html>

Ответы [ 4 ]

0 голосов
/ 02 февраля 2020

Используйте text-align: center; для центрирования текста в контейнере.

0 голосов
/ 02 февраля 2020

Чтобы упростить выравнивание элементов, просто оберните их в один div и настройте div с помощью CSS вместо того, чтобы иметь дело с каждым отдельным элементом.

Вот пример того, что вы можете сделать. 

body {
  text-align: left;
  background-image: url("img/lemon.jpg");
  color: #1b1b1b;
}

.form {
  width: 75%;
  margin: auto;
}

.form-bottom {
  text-align: center;
}

input[type=text],
input[type=password] {
  display: table;
  margin: 0 auto;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-bottom: 1px solid darkgray;
  background-color: #e9e9e9;
  box-sizing: border-box;
  margin-bottom: 7px;
  resize: vertical;
}

h1 {
  font-size: x-large;
}

h2 {
  font-size: x-large;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 7px 20px;
  height: 20%;
  width: 100%;
  display: table;
  margin: 0 auto;
  border: none;
  cursor: pointer;
  background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
  background-color: #3d94f6;
  border: 1px solid #337fed;
  cursor: pointer;
  color: #ffffff;
  font-size: 17px;
  text-decoration: none;
  text-shadow: -1px 1px 1px #1570cd;
}

button:hover {
  background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
  background-color: #1e62d0;
}

button:active {
  position: relative;
  top: 1px;
}

.container {
  width: 35%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  margin-top: 7%;
  background-color: white;
  box-shadow: 2px 2px 11px rgb(11, 11, 11);
  -webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
  -moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
  overflow: hidden;
}

#check {
  display: block;
  margin-top: 7px;
}

span.frgt {
  margin-top: 7px;
  display: block;
}

a {
  text-decoration: none;
  color: #1e62d0;
}

img {
  width: 100%;
  height: auto;
  opacity: 0.4;
}
<body>
  <div class="container">
    <div class="form">
      <h1>Login</h1>
      <input type="text" placeholder="Username" name="uname" required>
      <input type="password" placeholder="password" name="psw" required>
      <button type="submit">Login</button>
    </div>
    <hr>
    <div class="form-bottom">
      <label id="check">
            <input type="checkbox" checked="checked" name="remember"> Remember me
          </label>
      <span class="frgt">forgot <a href="#">password?</a></span>
    </div>
  </div>
</body>
0 голосов
/ 02 февраля 2020

Если вы установите h1 равной ширине кнопки и используете «margin: 0 auto», чтобы отцентрировать ее, это приведет к тому, что h1 охватит ширину кнопки, и по умолчанию текст будет выровнен по левому краю. начало кнопки. 

h1 {
  font-size: x-large;
  width: 65%;
  margin: 0 auto;
}

Я не совсем уверен, что именно вы хотите сделать с разделом проверки. Если вы используете «text-align: center», это будет центрировать его, или использовать тот же код, что и выше, чтобы выровнять его с кнопками.

0 голосов
/ 02 февраля 2020

вы можете использовать text-align: center; и vertical-align:top;

Если ваша проблема все еще существует, пожалуйста, объясните более четко, что вы хотите.

...