如何将此表格的标签和输入居中？
[英]How do I center the label and input of this form?
问题描述
I'm new to HTML/CSS and had some questions about my CodeCamp project 
我是HTML / CSS的新手，对我的CodeCamp项目有一些疑问
How do I move the label and input to the center of the form?
如何将标签和输入移动到表单的中心？ I've tried using text-align: center on my row class but it only separates the label and input. 我尝试使用text-align：居中于我的行类，但它仅将标签和输入分开。 Why are the checkboxes not grouped together?
为什么复选框未组合在一起？ I've tried expanding the bottom margin but it brings the checkboxes on the left column where the labels are supposed to be. 我尝试扩大底部边距，但它在标签应该位于的左侧列中显示了复选框。
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Nunito', sans-serif; background-color: #ea8a8a; } #title { color: #685454; text-align: center; padding: 10px; } #description { color: #685454; text-align: center; padding: 10px; } #outer-form { border-radius: 10px; background-color: #ebd5d5; padding-bottom: 10px; } .row {} .label { color: #685454; display: inline-block; text-align: right; float: left; padding-top: 5px; width: 190px; margin-right: 20px; } #name { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px; } #email { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #number { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #dropdown { height: 30px; margin-top: 5px; margin-bottom: 14px; display: inline-block; vertical-align: middle; horizontal-align: bottom; margin-left: 20px; width: 120px } input[type=radio] { margin-left: 20px; margin-bottom: 30px; vertical-align: baseline; margin-top: 20px; } input[type=checkbox] { margin-left: 20px; vertical-align: baseline; } #comments { margin-top: 10px; margin-bottom: 5px; vertical-align: middle; margin-left: 20px; width: 150px; height: 50px; } #submit { background-color: #ea8a8a; color: white; border-radius: 5px; font-size: 14px; margin-top: 10px; margin-bottom: 20px; display: inline-block; vertical-align: middle; margin-left: 160px; width: 100px; height: 40px; }
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700"> <h1 id="title">Doge Adoption Form</h1> <div id="outer-form"> <p id="description">Please fill out the questionare below</p> <form id="survey-form"> <div class="row"> <label class="label" id="name-label" for="name">Name: </label> <input id="name" placeholder="Enter your name" required> </input> </div> <div class="row"> <label class="label" id="email-label" for="email">Email: </label> <input id="email" type="email" placeholder="Enter your email" required> </input> </div> <div class="row"> <label class="label" id="number-label" for="age">Age: </label> <input id="number" min="18" max="99" type="number" placeholder="Age:" required> </input> </div> <div class="row"> <text class="label">What is your favorite dog: </text> <select id="dropdown"> <option value="Pomeranian"> Pomeranian</option> <option value="Beagle"> Beagle</option> <option value="German Shepard"> German Shepard</option> </select> </div> <div class="row"> <label class="label">How likely are you to pick up doge poop:</label> <input type="radio" name="odds" value="very likely"> Very Likely <input type="radio" name="odds" value="not likely"> Not Likely </div> <div class="row"> <label class="label"> What tricks will you teach (select all that apply)</label> <input type="checkbox" name="trick" value="Sit">Sit<br> <input type="checkbox" name="trick" value="Army crawl">Army crawl<br> <input type="checkbox" name="trick" value="Roll over">Roll over<br> <input type="checkbox" name="trick" value="Speak">Speak<br> </div> <div class="row"> <label class="label">Any additional information?</label> <textarea id="comments" placeholder="Enter your comment here..."></textarea> </div> <div class="row"> <input id="submit" type="submit" value="Submit"> </div> </form> </div>
2 个解决方案
解决方案1
0 2018-11-08 04:57:19
here is the code for u first of all a neat and clear alignment of a form you should write the code using bootstarp. 这是您的代码，首先，您应该使用bootstarp编写代码，使表单整齐清晰地对齐。
put this links also for working the code dear. 将此链接也用于工作亲爱的代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Signingroup Financial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" type="text/css">
<link rel='stylesheet' href='http://fonts.googleapis.com/icon?family=Material+Icons' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet" type="text/css">
<div class="row">
<div class="sg_formslist">
<div class="col-sm-12 col-md-12">
<div id="Selection-1-container" >
<form class="form-horizontal" id="form1">
<div class="col-sm-12 ">
<div class="col-sm-2">
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Surname<span class="impstar">*</span></label>
<div class="col-sm-6">
<input type="text" class="form-control" name="customer_name" Placeholder="Customer Name" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Mobile Number 1<span class="impstar">*</span></label>
<div class="col-sm-6">
<input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Mobile Number 2<span class="impstar">*</span></label>
<div class="col-sm-6">
<input type="tel" name="mob_num1" class="form-control" size="10" maxlength="10" Placeholder="+91 - 83445839284 ">
</div>
</div>
</div>
<div class="form-group ">
<div class="col-sm-12">
<label class="control-label col-sm-6">Gender<span class="impstar">*</span></label>
<div class="col-sm-6">
<div class="radio" required>
<label >
<input type="radio" name="Selection" id="Selection-1" value="female" checked>
Female
</label>
<label >
<input type="radio" name="Selection" id="Selection-1" value="male" >
Male
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="control-label col-sm-6">Description <span class="impstar">*</span></label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" name="description" placeholder="Description For Discount"></textarea>
</div>
</div>
</div>
<div class="form-group text-right">
<i class="fa fa-paper-plane plnay" ></i>
<input type="submit" class="btn btn-info" value="Submit ">
</div>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
let you try this code its working. 让您尝试使用此代码。
解决方案2
0 已采纳 2018-11-08 05:08:59
Look at this answer, I have added two styles in your page: 看看这个答案，我在您的页面中添加了两种样式：
#survey-form {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.div50 {
float: left;
width: 50%;
}
#survey-form for make the form alignment into center. #survey-form使表格对齐中心。
.div50 is to divide div as 50% of the parent div. .div50将div划分为父div的50％。
{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Nunito', sans-serif; background-color: #ea8a8a; } #title { color: #685454; text-align: center; padding: 10px; } #description { color: #685454; text-align: center; padding: 10px; } #outer-form { border-radius: 10px; background-color: #ebd5d5; padding-bottom: 10px; } .row {} .label { color: #685454; display: inline-block; text-align: right; float: left; padding-top: 5px; width: 190px; margin-right: 20px; } #name { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px; } #email { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #number { padding: 4px; margin-top: 5px; margin-bottom: 5px; display: inline-block; vertical-align: middle; margin-left: 20px; width: 110px } #dropdown { height: 30px; margin-top: 5px; margin-bottom: 14px; display: inline-block; vertical-align: middle; horizontal-align: bottom; margin-left: 20px; width: 120px } input[type=radio] { margin-left: 30px; margin-bottom: 15px; vertical-align: baseline; margin-top: 10px; } input[type=checkbox] { margin-left: 30px; vertical-align: baseline; } #comments { margin-top: 10px; margin-bottom: 5px; vertical-align: middle; margin-left: 20px; width: 150px; height: 50px; } #submit { background-color: #ea8a8a; color: white; border-radius: 5px; font-size: 14px; margin-top: 10px; margin-bottom: 20px; display: inline-block; vertical-align: middle; margin-left: 160px; width: 100px; height: 40px; } #survey-form { width: 100%; max-width: 400px; margin: 0 auto; } .div50 { float: left; width: 50%; }
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:400,700"> <h1 id="title">Doge Adoption Form</h1> <div id="outer-form"> <p id="description">Please fill out the questionare below</p> <form id="survey-form"> <div class="row"> <label class="label" id="name-label" for="name">Name: </label> <input id="name" placeholder="Enter your name" required> </div> <div class="row"> <label class="label" id="email-label" for="email">Email: </label> <input id="email" type="email" placeholder="Enter your email" required> </div> <div class="row"> <label class="label" id="number-label" for="age">Age: </label> <input id="number" min="18" max="99" type="number" placeholder="Age:" required> </div> <div class="row"> <text class="label">What is your favorite dog: </text> <select id="dropdown"> <option value="Pomeranian"> Pomeranian</option> <option value="Beagle"> Beagle</option> <option value="German Shepard"> German Shepard</option> </select> </div> <div class="row"> <div class="div50"><label class="label">How likely are you to pick up doge poop:</label></div> <div class="div50"> <input type="radio" name="odds" value="very likely"> <label>Very Likely</label><br> <input type="radio" name="odds" value="not likely"> <label>Not Likely</label> </div> </div> <div class="row"> <div class="div50"> <label class="label"> What tricks will you teach (select all that apply)</label> </div> <div class="div50"> <input type="checkbox" name="trick" value="Sit">Sit<br> <input type="checkbox" name="trick" value="Army crawl">Army crawl<br> <input type="checkbox" name="trick" value="Roll over">Roll over<br> <input type="checkbox" name="trick" value="Speak">Speak<br> </div> </div> <div class="row"> <label class="label">Any additional information?</label> <textarea id="comments" placeholder="Enter your comment here..."></textarea> </div> <div class="row"> <input id="submit" type="submit" value="Submit"> </div> </form> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使面板主体居中，输入标签与输入框的左侧对齐？ - How do i center the panel-body, with input-label align with left side of input box?
在HTML中，如何在表单的输入字段中添加标签？ - In Html how do I add a label to input fields within a form?
如何使用创建HTML表单 <label><input></label> <label>和<span>？</span></label> - How do I make a HTML form using <label> <input> and <span>?
如何在输入表单顶部对齐标签？ - How do I align label on top of an input form?
如何在 div 中垂直居中标签？ - How do I vertical center a label in a div?
如何在中心对齐表格，但在输入的最左侧上方有 label - How to align form in the center, but have the label above the very left of the input
如何使这些左/右对齐的标签和表格输入居中？ - How do I page center these left/right aligned label and form inputs?
如何居中对齐表格的 label - how to center align the label for form
我如何居中对齐表格 - How do I center align form
我如何居中<form>在 HTML/CSS 中？</form> - How do I center a <form> in HTML/CSS?
相关标签