Html 将输入文本框定位在中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9778903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
positioning the input text box in the center
提问by learner
In the code given below, I need to position the userid box in the center. I could not do this after many attempts. Sorry for being so naive.
My HTML and css file are as follows:
在下面给出的代码中，我需要将用户标识框定位在中心。经过多次尝试，我无法做到这一点。抱歉我太天真了。
我的 HTML 和 css 文件如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<link rel="stylesheet" type="text/css" href="styledel.css" />
</head>
<body>
<input type="text" name="userid" id="userid"> <!-- this need to go in the center -->
<br/><br/><br/>
<form action="http://localhost" method="post" name="form"">
<label for="name">Name</label>
<input type="text" id="name" name="name" disabled="disabled" />
<br></br>
<label for="email">E - mail</label>
<input type="text" name="email">
<br></br>
<label for="password">Select Password</label>
<input type="password" name="password" >
<br></br>
<label for="password2">Retype Password</label>
<input type="password" name="password2" >
<br></br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
My css file is as follows:
styledel.css
我的css文件如下：
styledel.css
* {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
}
#page-wrap { /*showing white background*/
width: 600px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
form, br {
clear: left;
margin: 0;
padding: 0;
}
input.form_element {
width: 221px;
background: transparent url('bg.jpg') no-repeat;
color : #747862;
height:20px;
border:0;
padding:4px 8px;
margin-bottom:0px;
}
.checkun{
width: 150px;
background: transparent url('bg.jpg') no-repeat;
color : #747862;
height:20px;
border:1px solid blue;
padding:4px 10px;
margin-bottom:0px;
position: right;
}
label, input {
width: 160px;
float: left;
font: 11px bold Tahoma, Arial, sans-serif;
margin: 1px;
padding: 2px;
}
label {
font: 14px bold Tahoma, Arial, sans-serif;
background: #eeeeee;
}
input {
width: 200px;
padding: 2px;
border: 1px solid #aaa;
}
Thanks in advance.
提前致谢。
回答by Kaushtuv
You can try by adding a the input in a div and setting the margin as auto for that div
您可以尝试通过在 div 中添加输入并将该 div 的边距设置为自动
#user-id-div
{
width:200px;
margin:auto;
}
Example: http://jsfiddle.net/R3quk/4/
回答by webdevexp
You can alternatively put the input tag inside a div and give text-align:center;
您也可以将 input 标签放在 div 中并给出 text-align:center;
<div style="text-align:center;"><input type="text" name="userid" id="userid"></div>
Try this
尝试这个
