Shulou(Shulou.com)06/01 Report--

Input text and label alignment

By default, as follows, text and input are centered.

I'm Chinese

But often the row height of label, or the height of input, is still centered by default. But many times label and input have to float, once floating, the back of the input tag will be tightly attached to the label tag, resulting in visual not centered.

Such as the following:

I am Chinese label {font-size: 12px; float: left;} input {height: 20px;}

The rendered effect is like this.

But this is not what I want, so I can usually control the padding-top of label to visually make it look centered. Just like the following:

Input radio box and label alignment

By default, label and radio are not aligned. We know that input is an inline element, but it can still set the height and width because it is an inline replaceable element. By default, radio has a margin value, but this is not because it affects that label and radio are not centered. The default effect is as follows:

Male x

Because label aligns to the baseline of the text, the so-called baseline is the bottom of x.

What will happen if we float?

Male x label {font-size: 30px; float: left;}

It turns out that after floating, the radio clings to the label and is at the top.

So how exactly do you align them?

Male x label {font-size: 50px; vertical-align: middle;} input {vertical-align: middle;}

The results are as follows:

So, let's test again whether this method can be used. Sets the height of the label.

Male x label {font-size: 50px; display: inline-block; height: 140px; vertical-align: middle;} input {vertical-align: middle;}

The results are as follows:

It shows that this method is feasible. You can also set up padding tests, so you won't test them here.

Summary:

Just set vertical-align: middle for both label and input.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.