выравнивание текста по центру внутри div - PullRequest
Новая
       9

выравнивание текста по центру внутри div

0 голосов
/ 10 июня 2018

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

Я их стилизовал, используя flex box, а затем использовал выравнивание по центру.Я также хочу добавить вертикальную линию между формой регистрации и формой входа.Я не хочу использовать одну из границ формы.Кроме использования одной из границ формы, есть ли способ сделать это.

Вещи, которые я пробовал, но не работали

1. text-align: center:

2. margin: 0 auto;

body {
  margin: 0px;
}

#head {
  text-align: center;
  background: linear-gradient(to right, cyan, purple);
  margin: 0px;
  padding: 20px;
  border-bottom: 2px solid lightgrey;
}

#head h1 {
  margin: 0px;
  font-family: 'Great Vibes', cursive;
  color: white;
  font-size: 40px;
}

.cont {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

input {
  padding: 2px;
  margin: 2px;
}

input [name="register"] {
  background-color: green;
}

#login {
  margin: 30px;
  font-family: 'Slabo 27px', serif;
}

#login h1 {
  margin: 0 auto;
}

#register {
  margin: 30px;
  font-family: 'Slabo 27px', serif;
}
<!DOCTYPE html>
<html>

<head>
  <title>The Joint.</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>

<body>
  <div id="head">
    <h1>The Joint.</h1>
  </div>
  <div id="whtpg">
    <div class="cont">
      <div id="register">
        <h3>Register</h3>
        <form action="reglog.php" method="POST">
          <input type="text" name="name" placeholder="Name"><br>
          <input type="text" name="uname" placeholder="Username"><br>
          <input type="password" name="pass" placeholder="Password"><br>
          <input type="password" name="cpass" placeholder="Confirm Password"><br>
          <input type="submit" name="register" value="Register">
        </form>
      </div>
      <div id="login">
        <h3>Login</h3>
        <form action="reglog.php" method="POST">
          <input type="text" name="uname" placeholder="Username"><br>
          <input type="password" name="lpass" placeholder="Password"><br>
          <input type="submit" name="login" value="Log In">
        </form>
      </div>
    </div>
  </div>
</body>

</html>

Ответы [ 3 ]

0 голосов
/ 10 июня 2018

Для центрирования заголовка формы регистра используйте: 

#register h3 {
  text-align: center;
}

И аналогично, для центрирования заголовка формы входа используйте: 

#login h3 {
  text-align: center;
}

И, длявертикальная линия, создайте пустую div и стилизуйте ее.Я использовал divider класс здесь: 

.divider {
  border-left: 1px solid black;
  border-right: 1px solid black;
  height: 200px;
  margin-top: 40px;
}

См. Полный код ниже: 

body {
  margin: 0px;
}

#head {
  text-align: center;
  background: linear-gradient(to right, cyan, purple);
  margin: 0px;
  padding: 20px;
  border-bottom: 2px solid lightgrey;
}

#head h1 {
  margin: 0px;
  font-family: 'Great Vibes', cursive;
  color: white;
  font-size: 40px;
}

.cont {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

input {
  padding: 2px;
  margin: 2px;
}

input [name="register"] {
  background-color: green;
}

#login {
  margin: 30px;
  font-family: 'Slabo 27px', serif;
}

#login h3 {
  text-align: center;
}

#register {
  margin: 30px;
  font-family: 'Slabo 27px', serif;
}

#register h3 {
  text-align: center;
}

.divider {
  border-left: 1px solid black;
  border-right: 1px solid black;
  height: 200px;
  margin-top: 40px;
}
<!DOCTYPE html>
<html>

<head>
  <title>The Joint.</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>

<body>
  <div id="head">
    <h1>The Joint.</h1>
  </div>
  <div id="whtpg">
    <div class="cont">
      <div id="register">
        <h3>Register</h3>
        <form action="reglog.php" method="POST">
          <input type="text" name="name" placeholder="Name"><br>
          <input type="text" name="uname" placeholder="Username"><br>
          <input type="password" name="pass" placeholder="Password"><br>
          <input type="password" name="cpass" placeholder="Confirm Password"><br>
          <input type="submit" name="register" value="Register">
        </form>
      </div>
      <div class="divider"></div>
      <div id="login">
        <h3>Login</h3>
        <form action="reglog.php" method="POST">
          <input type="text" name="uname" placeholder="Username"><br>
          <input type="password" name="lpass" placeholder="Password"><br>
          <input type="submit" name="login" value="Log In">
        </form>
      </div>
    </div>
  </div>
</body>

</html>
0 голосов
/ 11 июня 2018

Вы можете нарисовать линию посередине, используя псевдоселектор CSS ::after Ниже приведен фрагмент правила CSS, чтобы сделать это. 

div#register::after {
    content: "";
    display: block;
    width: 0px;
    height: 250px;
    border: 1px solid #b6b6b6;
    position: absolute;
    top: 110px;
    left: 50%;
}
.cont h3 {
    text-align: center;
}


  body {
  margin: 0px;
}

#head {
  text-align: center;
  background: linear-gradient(to right, cyan, purple);
  margin: 0px;
  padding: 20px;
  border-bottom: 2px solid lightgrey;
}

#head h1 {
  margin: 0px;
  font-family: 'Great Vibes', cursive;
  color: white;
  font-size: 40px;
}

.cont {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

input {
  padding: 2px;
  margin: 2px;
}

input [name="register"] {
  background-color: green;
}

#login {
  margin: 30px;
  font-family: 'Slabo 27px', serif;
}

#login h1 {
  margin: 0 auto;
}

#register {
  margin: 30px;
  font-family: 'Slabo 27px', serif;
}

div#register::after {
    content: "";
    display: block;
    width: 0px;
    height: 250px;
    border: 1px solid #b6b6b6;
    position: absolute;
    top: 110px;
    left: 50%;
}
.cont h3 {
    text-align: center;
}
<!DOCTYPE html>
<html>

<head>
  <title>The Joint.</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Slabo+27px" rel="stylesheet">
</head>

<body>
  <div id="head">
    <h1>The Joint.</h1>
  </div>
  <div id="whtpg">
    <div class="cont">
      <div id="register">
        <h3>Register</h3>
        <form action="reglog.php" method="POST">
          <input type="text" name="name" placeholder="Name"><br>
          <input type="text" name="uname" placeholder="Username"><br>
          <input type="password" name="pass" placeholder="Password"><br>
          <input type="password" name="cpass" placeholder="Confirm Password"><br>
          <input type="submit" name="register" value="Register">
        </form>
      </div>
      <div id="login">
        <h3>Login</h3>
        <form action="reglog.php" method="POST">
          <input type="text" name="uname" placeholder="Username"><br>
          <input type="password" name="lpass" placeholder="Password"><br>
          <input type="submit" name="login" value="Log In">
        </form>
      </div>
    </div>
  </div>
</body>

</html>
0 голосов
/ 10 июня 2018

Было бы полезно, если бы вы могли опубликовать HTML и CSS.

Я предполагаю, что контейнерный div не имеет настроек ширины, поэтому div имеет ту же ширину, что и текст, поэтому вы не можете отцентрировать его.Возможно, установите ширину в 100% его контейнера и установите выравнивание текста по центру и посмотрите, поможет ли это.

Из вашего кода вы можете попробовать 

#register h3 {
    text-align:center;
}

, это будет означать любой h3теги внутри div с регистром id будут иметь к ним атрибут text-align: center

В противном случае разместите HTML и CSS, и мы посмотрим.(Теперь я вижу HTML, добавьте CSS, пожалуйста

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...