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

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

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

Things I've tried but didn't work
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>

разместить HTML и CSS

— 10.06.2018 18:32

html css flexbox

10.06.2018 18:30

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

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

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

#register h3 {
    text-align:center;
}

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

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

Я добавил код. Извините, это заняло время, на сайте постоянно говорилось, что мне нужно добавить больше текста, поскольку мой вопрос был полон кода.

— 10.06.2018 19:06

Да, я вижу, что у вас нет параметров ширины в вашем CSS, потому что у вас нет параметров ширины, для CSS довольно сложно выровнять текст по центру. Вам нужно добавить параметры ширины к этим элементам так: #register h3 { text-align:center; width:200px; } или что-то в этом роде

— 10.06.2018 19:31

10.06.2018 18:42

Ответ принят как подходящий

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

#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>

@TheWIseone Может быть, это то, что вы хотели :)

— 10.06.2018 19:53

Спасибо, сэр..! Это было именно то, что я хотел.

— 11.06.2018 11:42

10.06.2018 19:52

вы можете нарисовать линию посередине, используя псевдоселектор 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>

11.06.2018 13:18

Другие вопросы по теме

Поле выбора CSS выглядит по-разному на определенных компьютерах / браузерах

Изменить z-index другого элемента при наведении

Получить центральное слово и предложения в бутстрапе

Ширина столбца меньше minmax

Выпадающее меню с флажком взломать не работает

Как сделать так, чтобы элемент отображался поверх другого элемента, когда z-index не работает?

Есть ли способ сделать отступ в первой строке абзаца в файле R Markdown

JQuery.Lazy () - ленивая загрузка фонового изображения раздела с идентификатором

Смещение и маржа при начальной загрузке

Как настроить ширину кнопок вкладок - ionic 2

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

Ответы 3

Другие вопросы по теме

Похожие вопросы