我对编程并不陌生,但对 HTML 很陌生。我被分配了创建内部网页的任务。我可能有些本末倒置,但我正在尝试设计页面的样式。我的问题是,如何让这些输入字段位于屏幕中央?
<body>
<h1 style="text-align:center;">Request for Production</h1>
<form name="message" method="post">
<section>
<div style="float:left;margin-right:20px;">
<label for="date">Date <span style="color:red">*</span></label>
<input id="date" type="date" value="" name="name" style="font-size: 20px; padding: 5px; color:rgb(220,220,220); border-radius: 3px; height:23px; width:200px; border-width: 1px;">
<label for="date"><span style="font-size: 14px;">Date</span></label>
</div>
<br style="clear:both;" />
</section>
<br>
<section>
<div style="float:left;margin-right:20px;">
<label for="email">Enter your email <span style="color:red">*</span></label>
<input id="email" type="text" value="" name="email" style="font-size: 16px; padding: 5px; color:rgb(220,220,220); border-radius: 3px; height:20px; width:200px; border-width: 1px;">
<label for="date"><span style="font-size: 14px;">[email protected]</span></label>
</div>
<div style="float:left;margin-right:20px;">
<label for="ccemail">Enter CC'ed email <span style="color:red">*</span></label>
<input id="email" type="text" value="" name="ccemail" style="font-size: 16px; padding: 5px; color:rgb(220,220,220); border-radius: 3px; height:20px; width:200px; border-width: 1px;">
<label for="date"><span style="font-size: 14px;">[email protected]</span></label>
</div>
</section>
</form>
</body>
我尝试了各种不同的内联样式,但我似乎无法让它按照我想要的方式运行。
您可以尝试在表单中使用此样式:
form {
display: flex
justify-content: center
}
或者这个:
div {
text-align: center
}
输入标签还有一个可能适合您的对齐属性
<input align="center" id="name_field" name="input_field">