在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.