在div的中心对齐文本
[英]aligning text in the center inside the div
问题描述
我一直在尝试样式注册表单。 我希望标题位于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 个解决方案
解决方案1
1 2018-06-10 16:42:41
如果可以发布html和css，将很有帮助。
我的猜测是容器div没有宽度设置，因此div与文本的宽度相同，因此无法居中。 也许将宽度设置为其容器的100％，并将text-align设置为居中，看看是否有帮助。
从您的代码中，您可以尝试
#register h3 {
text-align:center;
}
这意味着div内具有id寄存器的任何h3标签都将对其应用text-align：center属性
否则发布HTML和CSS，我们可以看看。 （我现在看到了HTML，也请添加CSS
解决方案2
1 2018-06-11 11:18:29
您可以使用CSS伪选择器::after中间画一条线::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>
解决方案3
0 已采纳 2018-06-10 17:52:39
要使注册表的标题居中，请使用：
#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>
在div中心顶部内对齐文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.