How to understand CSS alignment

This article focuses on "how to understand CSS alignment". Friends who are interested may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand CSS alignment.

I. be in the middle

1. Center alignment element

Align the block element horizontally (like), and setting the width of the element using margin: auto; will prevent it from extending to the edge of the container.

Then the element will occupy the specified width, and the remaining space will be divided equally between the two margins:

This div is in the middle.

.center {margin: auto; width: 50%; border: 3px solid green; padding: 10px;}

Note: if the width property is not set, the center alignment has no effect (or set to 100%).

two。 Center align text

Center the text inside the element, using text-align: center

These texts are centered.

.center {text-align: center; border: 3px solid green;}

3. Center picture

Center the picture, use margin: auto; and set it to a block-level element:

Img {display: block; margin: auto; width: 40%;}

2. Left and right

HTML Code:

Right alignment of programming dictionary

An example of how to correctly locate element and location attributes:

In my young and fragile years, my father gave me some advice that I had been thinking about.

1. Align left and right-use position

One way to align elements is to use position: absolute

In my young and fragile years, my father gave me some advice that I had been thinking about.

.right {position: absolute; right: 0px; width: 300px; border: 3px solid # 73AD21; padding: 10px;}

Note:

Absolute positioning elements are removed from the normal flow and can overlap elements.

When using position to align elements, always define margin and padding as elements. This is to avoid visual differences between different browsers.

There are also some problems with IE8 and earlier versions when using position. If the container element has a specified width (for example:) and is not set! DOCTYPE, IE8 and earlier versions will add 17px margins to the right. This seems to be a way to reserve space for the scroll bar. Therefore, always declare! DOCTYPE when using position:

Body {margin: 0; padding: 0;} .container {position: relative; width: 100%;} .right {position: absolute; right: 0px; width: 300px; background-color: # b0e0e6;}

two。 Align left and right-use float

Another way to align elements is to use the float attribute:

.right {float: right; width: 300px; border: 3px solid # 73AD21; padding: 10px;}

Tip:

When elements are aligned with floats, margins and padding are always defined for the body element. This is to avoid visual differences between different browsers.

Body {margin: 0; padding: 0;} .right {float: right; width: 300px; background-color: # b0e0e6;}

Effect picture:

Vertical center and horizontal center

HTML Code:

Programming dictionary is in the middle

In this example, we use positioning and transform attributes to center the element horizontally and vertically:

I am in the middle horizontally and vertically.

Note: the transform property does not support IE8 and earlier versions.

1. Use padding

There are many ways to center vertical CSS elements. A simple solution is to use the top and bottom padding:

.center {padding: 70px 0; border: 3px solid green;}

Centered horizontally and vertically, using padding and text-align: center:

Vertical center

.center {padding: 70px 0; border: 3px solid green; text-align: center;}

two。 Use line-height

Another trick is to use the value of the line-height property equal to the value of the height property.

.center {line-height: 200px; height: 200px; border: 3px solid green; text-align: center;} / * If the text has multiple lines, add the following: * / .center p {line-height: 1.5; display: inline-block; vertical-align: middle;}

3. Use position & transform

If padding and line-height are not optional, a third solution is to use positioning and transform attributes:

.center {height: 200px; position: relative; border: 3px solid green;} .center p {margin: 0; position: absolute; top: 50%; left: 50%; transform: translate (- 50%,-50%);} so far, I believe you have a deeper understanding of "how to understand CSS alignment". You might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!