Question

我一直试图设置一个注册表格。我希望标题位于div的中心。我旁边还有另一张登录表单。

我使用弹性框对它们进行了样式设置，然后使用对齐内容作为中心。我还想在注册表单和登录表单之间添加一条垂直线。我不想使用表单的其中一个边框。除了使用表单边框之外还有任何方法可以做到。

我尝试但没有用的东西

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>

Answer 1

如果你能发布html和css会很有帮助。

我的猜测是容器div没有宽度设置，因此div与文本的宽度相同，所以你不能将它居中。也许将宽度设置为其容器的100％，并将text-align设置为center并查看是否有帮助。

从您的代码中可以尝试

#register h3 {
    text-align:center;
}

这意味着带有id寄存器的div内的任何h3标签都会应用text-align：center属性

否则发布HTML和CSS，我们可以看看。（我现在看到HTML，请加入CSS

Answer 2

你可以使用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>

Answer 3

要使登记表格的标题居中，请使用：

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

请参阅以下完整代码：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

在div中间对齐文本

3 个答案: