请教css样式input居中对齐
本人刚入门，请教做成图中这个样子的思路是什么，是把所有lable和input分成两个块，然后对块进行绝对定位吗？我什么都试过了，就是做不出来，可能是某些点理解不够透彻，求思路，求代码！
对的，分成2个，最简单的是可以用table实现，分成2个td，一个放文字（右对齐），一个放输入（左对齐）。
div布局的话 就是分左右结构 用float
弹性布局的话 就没层外面用div保住就行
用一个父级div设置display为flex 然后子元素label和input各用一个div包起来 给div设置flex:x 占多少位置 然后再给高度和line-height
用bootstrap前端框架，自适应，而且格式好调
http://v3.bootcss.com/css/#forms
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Little Test</title>
<style type="text/css">
* { margin: 0; padding: 0; font-size: 12px; color: #666; border: 0; box-sizing: border-box; }
.form { width: 800px; margin: 30px auto; }
.form-group { width: 100%; height: 36px; margin-bottom: 10px; }
.form-group:before, .form-group:after { content: ''; display: block; clear: both; height: 0; }
.textarea-group { height: auto; }
.label { display: block; float: left; width: 20%; height: 100%; line-height: 36px; text-align: right; }
.input { display: block; float: right; width: 78%; height: 100%; line-height: 32px; text-align: right; }
.input-area { display: block; width: 100%; height: 100%; border: 1px solid #aaa; background: #fff; padding: 0 14px; }
.submit-btn { display: block; width: 100%; height: 36px; background: #39b4fb; color: #fff; text-shadow: 1px 1px 1px #1a8fd3; }
</style>
</head>
<body>
<div class="form">
<div class="form-group">
<div class="label"><label>标签1：</label></div>
<div class="input">
<input type="text" class="input-area">
</div>
</div>
<div class="form-group">
<div class="label"><label>标签2222222222：</label></div>
<div class="input">
<input type="text" class="input-area">
</div>
</div>
<div class="form-group">
<div class="label"><label>标签333333：</label></div>
<div class="input">
<input type="text" class="input-area">
</div>
</div>
<div class="form-group textarea-group">
<div class="label"><label>标签444444444：</label></div>
<div class="input">
<textarea class="input-area" rows="6"></textarea>
</div>
</div>
<div class="form-group">
<input type="submit" class="submit-btn" value="提交">
</div>
</div>
</body>
</html>
<br> .box{<br> width: 50%;<br> height: 50%;<br> margin: 0 auto;<br> }<br> .box1{<br> display: flex;<br> margin-bottom: 10px;<br> }<br> .gulp-title{<br> display: inline-block;<br> width: 150px;<br> height: 30px;<br> text-align: right;<br> }<br>
姓名：
密码密码：
姓名姓名姓名：
个人介绍
主要的就是text-align: right;
<!DOCTYPE html>
Document
<br> .box{<br> width: 50%;<br> height: 50%;<br> margin: 0 auto;<br> }<br> .box1{<br> display: flex;<br> margin-bottom: 10px;<br> }<br> .gulp-title{<br> display: inline-block;<br> width: 150px;<br> height: 30px;<br> text-align: right;<br> }<br>
姓名：
密码密码：
姓名姓名姓名：
个人介绍
table标签 两列 一列右对齐写文字 一列左对齐 input 样式搞一搞 就好了啊
首先通过观察之后发现 一个label和input有很多地方用到，这样的话 你就单纯滴把这种组合的控件搭配写出来，然后在把许多这个拼装起来
<div class='input1'>
<label></label>
<input/>
</div>
<div class='input1'>
<label></label>
<input/>
</div>
<div class='input1'>
<label></label>
<input/>
</div>
定好他们的css
其余的可以根据不同的位置放置不同的控件即可
昨天给你回复的时候被禁言了，到今天才能回答，不多说了，上代码
/*背景*/
html,body{
width: 100%;
height: 100%;
background: #EEEEEE;
overflow: hidden;
}
/*整个大div居中*/
#btn{
width: 80%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
overflow: hidden;
}
/*文字百分比时居中样式*/
.shan:after{
width: 0;
height: 100%;
content: "";
display: inline-block;
vertical-align: middle;
}
.show-left{
width: 29%;
height: 90%;
float: left;
border-right:1px solid;
}
.show-right{
width: 70%;
height: 90%;
float: left;
overflow: hidden;
}
.button{
width: 100%;
height: 10%;
overflow: hidden;
}
.confirm{
width: 80%;
margin-left: 10%;
margin-top: 1.5%;
height: 70%;
background: #01827D;
border: none;
outline: none;
border-radius: 8px;
color: #fff;
}
.big-content{
width: 100%;
height: 8%;
overflow: hidden;
}
.shan-title{
width: 25%;
height: 100%;
float: left;
text-align: right;
padding-right: 5%;
}
.shan-content{
width: 70%;
height: 100%;
float: left;
}
.text_area{
width: 100%;
height: 15%;
overflow: hidden;
}
.textarea{
width: 98%;
height: 90%;
}
html
<body>
<div id="btn">
<div class="show-left">
这边是侧栏
</div>
<div class="show-right">
<div class="big-content">
<div class="shan-title shan">
请输入昵称：
</div>
<div class="shan-content shan">
<input type="text" name="" id="" value="" placeholder="请输入昵称"/>
</div>
</div>
<div class="big-content">
<div class="shan-title shan">
请输入昵称：
</div>
<div class="shan-content shan">
<input type="text" name="" id="" value="" placeholder="请输入昵称"/>
</div>
</div>
<div class="big-content">
<div class="shan-title shan">
请输入昵称：
</div>
<div class="shan-content shan">
<input type="text" name="" id="" value="" placeholder="请输入昵称"/>
</div>
</div>
<div class="text_area">
<div class="shan-title shan">
请输入昵称：
</div>
<div class="shan-content shan">
<textarea class="textarea" name="" rows="" cols=""></textarea>
</div>
</div>
</div>
<div class="button">
<button class="confirm">确认提交</button>
</div>
</div>
</body>
用float 文字用label标签，输入框用input标签
用
标签来做，或者学习个简单的前端框架来做