在div的中心对齐文本
[英]aligning text in the center inside the div
问题描述
I have been trying to style a Register form. 
我一直在尝试样式注册表单。 I want the heading to be in the center of the div. 我希望标题位于div的中心。 I have another login form just beside it. 我旁边有另一个登录表单。
I have styled them using flex box and then used justify content as center. 我已经使用flex box设置了样式，然后使用证明内容为中心。 I also want to add a vertical line between the register form and login form. 我还想在注册表单和登录表单之间添加一条垂直线。 I don't want to use one of the borders of the form. 我不想使用表格的边框之一。 Apart from using one of the form's border is there any way to do it. 除了使用窗体的边框之一之外，还可以使用其他任何方法。
Things I've tried but didn't work
1.
text-align: center:text-align: center：2.
margin: 0 auto;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
It would be helpful if you could post the html and css. 如果可以发布html和css，将很有帮助。
My guess is that the container div has no width settings, so the div is the same width as the text, so you cannot center it. 我的猜测是容器div没有宽度设置，因此div与文本的宽度相同，因此无法居中。 Maybe set the width to 100% of its container and set the text-align to center and see if that helps. 也许将宽度设置为其容器的100％，并将text-align设置为居中，看看是否有帮助。
From your code you could try 从您的代码中，您可以尝试
#register h3 {
text-align:center;
}
this will mean any h3 tags inside the div with the id register will have the text-align:center attribute applied to them 这意味着div内具有id寄存器的任何h3标签都将对其应用text-align：center属性
Otherwise post the HTML and CSS and we can take a look. 否则发布HTML和CSS，我们可以看看。 (I see the HTML now, add the CSS too please （我现在看到了HTML，也请添加CSS
解决方案2
1 2018-06-11 11:18:29
you can draw a line in the middle using CSS pseudo selector ::after following is the piece of CSS rule to do that. 您可以使用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
For centering the heading of the register form, use: 要使注册表的标题居中，请使用：
#register h3 {
text-align: center;
}
And similarly, for centering the heading of the login form, use: 同样，为了使登录表单的标题居中，请使用：
#login h3 {
text-align: center;
}
And, for the vertical line, create an empty div and style it. 并且，对于垂直线，创建一个空的div并设置其样式。 I've used divider class here: 我在这里使用了divider类：
.divider {
border-left: 1px solid black;
border-right: 1px solid black;
height: 200px;
margin-top: 40px;
}
See the full code below: 请参阅下面的完整代码：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.