aligning text in the center inside the div
Question
I have been trying to style a Register form. I want the heading to be in the center of the div. I have another login form just beside it.
I have styled them using flex box and then used justify content as center. 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: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 answers
solution1
1 2018-06-10 16:42:41
It would be helpful if you could post the html and 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. Maybe set the width to 100% of its container and set the text-align to center and see if that helps.
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
Otherwise post the HTML and CSS and we can take a look. (I see the HTML now, add the CSS too please
solution2
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.
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>
solution3
0 ACCPTED 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. I've used divider class here:
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.