gpt4 book ai didi

html - 如何在 P 和居中文本上对齐 HTML 定位和输入

转载 作者:太空宇宙 更新时间:2023-11-04 04:07:03 25 4
gpt4 key购买 nike

大家好,我实际上一直在谷歌上到处寻找这个,甚至是 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com