Summary of common css centering methods

Recently, I have done several web projects following online tutorials. During the process, several methods were involved in centering, so I wanted to summarize them. First, to clarify my own ideas, and second, I hope to share them with those who need help. Friends.

Don’t say much, just get to the point.

There are seven centering methods involved this time, all of which are commonly used.

Table of contents

1.text-align:center is used for horizontal alignment

2. Use the line-height attribute to adjust the text line height to achieve centering

3.vertical-align sets vertical alignment

4.background-position to set the horizontal/vertical position

5 Modify the Padding value to center the Content

6.margin :0 auto;

7. Absolute positioning position:absloute


1.text-align:center is used for horizontal alignment

This method is not available for floating

Applicable elements:

1.Text

2.span,a tag

3.input,img tag

Note: If you need to center the above elements horizontally, text-align needs to be set to the parent element of the above elements (inline elements are set to the parent element)

Other values ​​for the text-align attribute:

2. Use the line-height attribute to adjust the text line height to achieve centering

Row height diagram:

Line-height attribute value:

1.Number+px

2. Multiples (multiples of the current label font-size)

Implementation:

1. When vertically centering a single line of text, you can set line-height: the height of the text parent element

2. When the web page is accurately laid out, line-height: 1; will be set to cancel the upper and lower spacing.

3.vertical-align sets vertical alignment

vertical-align applies to the same elements as text-align

The attribute value of vertical-align:

4.background-position to set the horizontal/vertical position

Commonly used to set the position of sprites, background images and some small icons

Attribute value:

1. Directional nouns: 1. Horizontal direction: left, center, right

2. Vertical direction: top, center, bottom

2. Number + px (coordinate): For example, background-position: 13px -110px; the first is the x coordinate, and the second is the y coordinate.

5 Modify the Padding value to center the Content

6.margin :0 auto;

This method is the most common and is often used to center the center of the page.

The value of the first attribute controls up and down, and the value of the second attribute controls left and right. auto means centered

Float is not available

7. Absolute positioning position:absloute

margin: 0 auto; not available

Absolute positioning can be centered by setting the offset attribute

 

In addition to setting the value of number + px, the offset attribute can also be set to a percentage:

Example: div{

                position:absoluate;

left:40%; /*Start from the left and move to 40% of the width of the parent block. The same applies to right, top, and bottom*/

        }

Related Posts

[H5 WeChat Authorization] Simple implementation of H5 page WeChat authorization function, WeChat developer tool reports system error, error code -1, undefined solution [Details]

Java project: train ticket reservation system (java+JDBC+JSP+Servlet+html+mysql)

Selenium simple common operations (part of WebdriverAPI)

Teach you step by step how to install VSCode (with illustrated steps)

css relative positioning and absolute positioning

Commonly used selectors in CSS

Solve vue multi-level routing cache failure Solve the multi-level routing cache problem based on keep-alive vue keep-alive cache failure vue-element-admin multi-level routing cache failure

Implement drag and drop sorting in vue

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*