在div内居中对齐文本
在div内居中对齐文本
提问于 2018-06-11 00:30:33
我一直在尝试设计Register窗体的样式。我希望标题位于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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50785792
复制相关文章
相似问题