The checkbox and description text cannot be aligned.

My friends who have written web pages may have encountered this problem: the checkbox cannot be aligned with the description text (such as a label or a label). If the checkbox is not floating, if it weren't for instructions, the text would go up.

 

I have encountered this problem before, but I did not go into it. Today, we want to solve the problem of interface display left over from the project. This problem cannot be solved because it is really everywhere.

 

Today, with the help of the great Google, and continuous experimentation, we finally solved the "historical issues" of this "Old and difficult ". Share your experience as follows:

In fact, it is very simple. It is very simple. Add a CSS attribute to every tag to be aligned:

HTML code 650) This. width = 650; "class =" star "src =" http://yunzhu.iteye.com/images/icon_star.png "alt =" add to Favorites "/>

1. Vertical-align: middle;

 

 

For example, I have a checkbox followed by a hyperlink. The original HTML code is as follows:

HTML code 650) This. width = 650; "class =" star "src =" http://yunzhu.iteye.com/images/icon_star.png "alt =" add to Favorites "/>

1. <Input type = checkbox id = "the_id" name = checkbox style = "vertical-align: middle;"/>

2. <A href = "the_link" Title = "the_title"> </a>

 

Original:

650) This. width = 650; "src =" http://dl.iteye.com/upload/attachment/511368/bc4c57d1-26eb-307b-a25f-96a6f85d1730.png "/>
 

 

The modification is as follows:

HTML code 650) This. width = 650; "class =" star "src =" http://yunzhu.iteye.com/images/icon_star.png "alt =" add to Favorites "/>

1. <Input type = checkbox id = "theid" name = checkbox style = "vertical-align: middle;"/>

2. <A href = "the_link" Title = "the_title" style = "vertical-align: middle;"> </a>

 

Effect
650) This. width = 650; "src =" http://dl.iteye.com/upload/attachment/511374/b6c29e7d-d823-3a1a-aace-0d580f948f95.png "/>

 

This article provides a detailed analysis of such problems:

The form elements cannot be aligned with the prompt text (the input and checkbox text are aligned)