CSS controls the alignment of elements in HTML_html/css_WEB-ITnose

I wrote a registration interface as follows:


The dc6dce4a544fdca2df29d5ac0ea9906b attribute is set to the center. Now I want the red prompt to appear below the input box and align it to the left of the input box. How to achieve this? My HTML code is as follows:

<form action="registPro" method="post" id="regist">   <div>       <input type="text" id="name" name="user.username" placeholder="用户名">                         </div>       <span id="msg01" class="msg"></span>   <div>       <input type="password" id="pass" name="user.pass" placeholder="设置密码">         </div>       <span id="msg02" class="msg"></span>   <div>      <input type="submit" id="submit" value="注  册" class="button"/>   </div>                  	  	     		      		     	  		

The CSS properties are set as follows:

<style type="text/css"> input{width:280px;height:30px} .msg{color:red; font-size:1pt;} div{text-align:center;line-height:60px;}                    .button{background-color:OrangeRed;width:250px;height:30px;border:0;}</style>

How can I achieve the function I want? ?

Reply to discussion (solution)

 .msg{color:red; font-size:1pt; text-align:center; display:block;}

 .msg{color:red; font-size:1pt; text-align:center; display:block;}

What you said is to center 45a2772a6b6107b401db3c9b82c049c2. What I want is to make the red prompt and input box left-aligned

 .msg{color:red; font-size:1pt; text-align:center; display:block;}

What you said is to center the 45a2772a6b6107b401db3c9b82c049c2. What I want is to make the red prompt and the input box left-aligned

 .msg{color:red; font-size:1pt;display:block;width:280px;margin:0 auto;}

<div class="cen"><form action="registPro" method="post" id="regist">   <div>       <input type="text" id="name" name="user.username" placeholder="用户名">                         </div>       <span id="msg01" class="msg">ssssss</span>   <div>       <input type="password" id="pass" name="user.pass" placeholder="设置密码">         </div>       <span id="msg02" class="msg">ssss</span>   <div class="tc">      <input type="submit" id="submit" value="注  册" class="button"/>   </div> </form></div>  <style type="text/css">    .tc{text-align:center;}    .cen{text-align:center;margin:0 auto;width:300px;}    .cen form{text-align:left;} input{width:280px;height:30px} .msg{color:red; font-size:1pt;} div{line-height:30px;}                    .button{background-color:OrangeRed;width:250px;height:30px;border:0;}</style>

Put the text box and prompt box in a parent div, and set the css style text-aline:left

If you are practicing by yourself, you can do this If you are writing a company project, you can use the validation framework, which is very convenient

Refer to Jquery validate

dc6dce4a544fdca2df29d5ac0ea9906b
    9bf65d0975ed0bdd8e64dd371e97c0e5
----》

Change to

dc6dce4a544fdca2df29d5ac0ea9906b
="username">                                                               🎜>
If you want to be the same, you must be together




You can set the width of the form, which can easily solve the problem. View these things as blocks, and the layout is very simple