大家好，我实际上一直在谷歌上到处寻找这个，甚至是 youtube，但没有任何运气。
我实际上是第一次遇到这个问题，我想将所有内容居中对齐，但如果您注意到段落和输入文本没有垂直对齐。它们是 flex 的，但在中心对齐我正在尝试为文本输入和
制作一条完美的线换句话说就是这样
Age: ______________
Year: ______________
group: ______________
不是这样的默认中心位置
Age: ______________
Year: ______________
group: ______________
无论如何，这是我的 css 和 html 代码
<html>
<head>
</head>
<body>
<div id="container">
<h3 class="header"> Welcome to the registration form </h3>
<div id="border"> </div>
<div id="box">
<p> Enter Name: <input class="in" type="text" name="name" value="${param.name}"> </p>
<p> Enter Age: <input class="in" type="text" name="name" value="${param.name}"> </p>
<p> Enter Address: <input class="in" type="text" name="name" value="${param.name}"> </p>
<p> Enter phone: <input class="in" type="text" name="name" value="${param.name}"> </p>
</div><!--box -->
</div><!--container -->
</body>
</html>
和我的CSS
/*
Document : style
Created on : Jan 18, 2014, 9:53:43 AM
Author : will
Description:
Purpose of the stylesheet follows.
*/
*{
margin: 0px;
}
body{
background-color: black;
}
#container{
color: black;
margin: 50px auto;
border: solid black 2px;
text-align:center;
width: 700px;
height: 540px;
background-image: url('http://www.kodemi.com/images/full/2013/12/20/white-background-wallpaper-image-pics-hdwallpc-White-Background-Wallpaper-Image-Pics.jpg');
}
#block{
width: 300px;
color: black;
margin: 36px auto;
}
h3.header{
color: black;
font-size:25px;
margin: 30px 30px 5px;
}
#border{
width: 400px;
border-top: solid black 1px;
margin: auto;
}
#box p{
margin: 20px;
}
#box input{
margin-left: 10px;
}
最佳答案
您可以向字段名称添加 label 标记，设置宽度，并将文本右对齐以确保所有输入框都从同一点开始:
label {
width: 115px;
display: inline-block;
text-align: right;
}
http://jsfiddle.net/Kiaaanabal/dQLzy/
希望这对您有所帮助!
关于html - 如何在 P 和居中文本上对齐 HTML 定位和输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21213468/