文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >在div内居中对齐文本

问在div内居中对齐文本
EN

Stack Overflow用户
提问于 2018-06-11 00:30:33
回答 3查看 77关注 0票数 1

我一直在尝试设计Register窗体的样式。我希望标题位于div的中心。我在它旁边有另一个登录表单。

我已经使用flex box设置了样式，然后使用了对齐内容作为中心。我还想在注册表单和登录表单之间添加一条垂直线。我不想使用表单的一个边框。除了使用窗体的一个边框之外，还有什么方法可以做到这一点吗？

我尝试过的

方法都不起作用

1.text-align: center：

2.margin: 0 auto;

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<!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
flexbox
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-11 01:52:40

要使注册表的标题居中，请使用：

代码语言：javascript
复制
#register h3 {
  text-align: center;
}

类似地，要使登录表单的标题居中，请使用：

代码语言：javascript
复制
#login h3 {
  text-align: center;
}

对于垂直线，创建一个空的div并设置它的样式。我在这里使用了divider类：

代码语言：javascript
复制
.divider {
  border-left: 1px solid black;
  border-right: 1px solid black;
  height: 200px;
  margin-top: 40px;
}

下面是完整的代码：

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<!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
EN

Stack Overflow用户

发布于 2018-06-11 00:42:41

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

我的猜测是，容器div没有宽度设置，所以div与文本的宽度相同，所以不能居中。也许可以将宽度设置为其容器的100%，并将文本对齐设置为居中，看看这是否有帮助。

从您的代码中，您可以尝试

代码语言：javascript
复制
#register h3 {
    text-align:center;
}

这意味着div中具有id寄存器的任何文本标记都将应用h3 -align:center属性

否则，张贴HTML和CSS，我们可以看看。(我现在看到HTML了，也请加上CSS

票数 1
EN

Stack Overflow用户

发布于 2018-06-11 19:18:29

你可以使用CSS伪选择器在中间画一条线，::after下面是一段这样做的CSS规则。

代码语言：javascript
复制
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;
}

​

代码语言：javascript
复制
  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;
}
代码语言：javascript
复制
<!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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50785792

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档