"CSS Basics" text alignment, horizontal alignment, vertical alignment

First say the horizontal alignment, that first thought is Text-align, Text-align:left,text-align:center,text-align:right, represents the left alignment, center alignment and right alignment, It is important to note that if you have padding this kind of things in, you can see clearly the padding value on both sides is the same, when you see the text is not in the middle, it may be because the two sides of the padding value is different, for example:

<p> I am a Test text </p>

If I had seen a log of a simple Web page in front of me, I would know that this should be in the body tag.

This is how it is on the Web:

To be able to see clearly, I set the body to 960px wide, and added a gray border.

Add a text-align:center, and it becomes this:

Indeed to the central, but if padding-left:10px;padding-right:50px; the result is this:

I tried it, not too obvious, because the total width of 960 is too big to change to padding-left:10px;padding-right:300px, and the result is this:

This is obvious, text-align:cneter, is not all, so when the alignment, see if there is such a situation.

Speaking of padding, can also use padding to align, very not recommended, so not much to say.

In other words, vertical alignment, this is more troublesome, if it is a line of text, you can use Line-height to control, that is, with the spacing to control, the value of Line-height and the text is the same height of the container, for example, the above example, the height of P is 30px, like this:

In order to see Clearly, p is marked with a light gray background, to put the text in the middle can add line-height:30px, the result is like this:

See, the vertical direction to the middle, with the text-align:center, it is in the middle of the.

Vertical alignment has an attribute of Vertical-align,vertical-align:top;,vertical-align:middle;,vertical-align:bottom, which corresponds to the alignment, alignment, and bottom alignment, respectively. Why do I not say at the beginning, sometimes it is invalid, so I do not use, originally vertical alignment is not used.

The last is to use padding, the general is padding-top, the number depends on the situation.

"CSS Basics" text alignment, horizontal alignment, vertical alignment