如何将输入置于屏幕中央[重复]

问题描述 投票:0回答:1

我对编程并不陌生,但对 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>

我尝试了各种不同的内联样式,但我似乎无法让它按照我想要的方式运行。

html css
1个回答
0
投票

您可以尝试在表单中使用此样式:

form {
   display: flex
   justify-content: center
}

或者这个:

div {
   text-align: center
}

输入标签还有一个可能适合您的对齐属性

<input align="center" id="name_field" name="input_field">
© www.soinside.com 2019 - 2024. All rights reserved.