CSS controls the alignment of elements in HTML_html/css

I wrote a registration interface as follows:

The

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>

Copy after login

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>

Copy after login

How can I achieve the function I want? ?

Reply to discussion (solution)

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

Copy after login

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

Copy after login

What you said is to center . 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;}

Copy after login

What you said is to center the . 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;}

Copy after login

<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>

Copy after login

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

----》

Change to

="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

Related labels：

CSS控制HTML中元素的对齐问题

source：php.cn

Previous article：How to pass a value to two actions at the same time? _html/css_WEB-ITnose Next article：Set the HTML control in MVC to readonly_html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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

Reply to discussion (solution)