將h1元素和輸入元素垂直居中時遇到麻煩
[英]Having trouble vertically centering an h1 element and an input element
問題描述
目標：我正在嘗試在用戶正在輸入一些信息的地方項目上建立輸入。 目前，我將其設置為在最左側的氣泡中輸入標簽，然后是兩個文本輸入氣泡。
問題：在標有氣泡的氣泡后面的輸入字段大約有5個像素，我無法弄清楚該如何糾正。
注意：我對HTML / CSS還是很陌生，並且完全是自學成才的，因此，如果有更好的方法來做我想做的事情，請告訴我。 波紋管是給我麻煩的部分
.inputConatiner { height: 75px; } .textContainer { height: 75px; width: 500px; display: inline-block; } input[type="text"] { border: 0px solid; border-radius: 20px; background-color: rgb(230, 230, 230); padding-top: 13px; padding-left: 10px; padding-bottom: 13px; } .label { width: 270px; height: 40px; font-family: "Nunito Sans"; font-size: 30px; display: inline-block; background-color: rgb(104, 255, 144); border-radius: 20px; text-align: center; } input { width: 200px; }
<head> <title>Side Project</title> <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet"> </head> <body> <form method="post" action="#" name="getStudentInfo"> <div class="inputConatiner"> <h1 class="label">Enter Your Name</h1> <div class="textContainer"> <input type="text" placeholder="First" required /> <input type="text" placeholder="Last" required /> </div> </div> <div class="inputConatiner"> <h1 class="label">1A Class</h1> <input type="text" placeholder="Class" required /> <input type="text" placeholder="Teacher" required /> </div> </form> </body>
3 個解決方案
解決方案1
0 2017-12-26 05:41:04
使用display: flex; 為.textContainer解決5px問題。
請參閱此文件了解FlexBox
解決方案2
0 已采納 2017-12-26 05:55:22
我已經在下面更新了您的代碼段。 我認為這是您正在尋找的東西，只是通過使用vertical-align: middle; 在label 。 不知道您將其用於什么，但是，我建議您使用諸如https://getbootstrap.com/之類的框架。 大多數框架在所有屏幕尺寸和設備上都具有出色的基礎知識（如下面的代碼片段所示，您必須全屏查看，否則會一團糟。目前，從UI的角度來看，此實現受到非常有限的限制）反應靈敏。
希望這可以幫助。
.inputConatiner { height: 75px; } .textContainer { height: 75px; width: 500px; display: inline-block; } input[type="text"] { border: 0px solid; border-radius: 20px; background-color: rgb(230, 230, 230); padding-top: 13px; padding-left: 10px; padding-bottom: 13px; } .label { width: 270px; height: 40px; font-family: "Nunito Sans"; font-size: 30px; display: inline-block; background-color: rgb(104, 255, 144); border-radius: 20px; text-align: center; vertical-align: middle; } input { width: 200px; }
<head> <title>Side Project</title> <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet"> </head> <body> <form method="post" action="#" name="getStudentInfo"> <div class="inputConatiner"> <h1 class="label">Enter Your Name</h1> <div class="textContainer"> <input type="text" placeholder="First" required /> <input type="text" placeholder="Last" required /> </div> </div> <div class="inputConatiner"> <h1 class="label">1A Class</h1> <input type="text" placeholder="Class" required /> <input type="text" placeholder="Teacher" required /> </div> </form> </body>
解決方案3
0
我在您的HTML代碼中注意到的一件事是您的第二個.inputContainer缺少一個.textContainer 。 既然您說過您是HTML和CSS的新手，我建議您使用基本屬性（例如float來使元素並排堆疊，並margin用於間距/對齊的margin 。
.inputConatiner { height: auto; } /* Without this, the layout would be ruined because of float */ .inputConatiner:before, .inputConatiner:after { content: ''; display: table; } .inputConatiner:after { clear: both; } .textContainer { height: auto; width: 500px; margin-top: 20px; margin-left: 10px; float: left; /* This makes the elements stacked side by side */ } input[type="text"] { border: 0px solid; border-radius: 20px; background-color: rgb(230, 230, 230); padding-top: 13px; padding-left: 10px; padding-bottom: 13px; } .label { width: 270px; height: 40px; font-family: "Nunito Sans"; font-size: 30px; float: left; /* This makes the elements stacked side by side */ background-color: rgb(104, 255, 144); border-radius: 20px; text-align: center; } input { width: 200px; }
<form method="post" action="#" name="getStudentInfo"> <div class="inputConatiner"> <h1 class="label">Enter Your Name</h1> <div class="textContainer"> <input type="text" placeholder="First" required /> <input type="text" placeholder="Last" required /> </div> </div> <div class="inputConatiner"> <h1 class="label">1A Class</h1> <div class="textContainer"> <input type="text" placeholder="Class" required /> <input type="text" placeholder="Teacher" required /> </div> </div> </form>
垂直居中放置元素時遇到麻煩
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.