(If some phrases are unfamiliar, you can quickly browse through the essays I posted "html common tags", "CSS Summary (Part 1, 2, and 2)", and review it again).
☆Horizontal centering setting - inline elements
In actual work, we often encounter scenarios where we need to set horizontal centering. Now let’s summarize how to set horizontal centering of. If the set element is an inline element such as text or picture, horizontal centering is achieved by setting text-align:center to the parent element. The following code: html code:
☆ Horizontal centering setting - fixed-width block element
When the element to be set is a block element, text-align: center will not work. There are two situations: fixed-width block Shape elements and block elements of variable width. Let’s take a look at fixed-width block elements first. Elements that meet the two conditions of fixed width and block can be centered by setting the "left and right margin" value to "auto". Let's look at an example of setting the div block element to be horizontally centered: html code:
Note: the " The upper and lower margins can be set at will.
The rendering is as follows:
☆Horizontal centering setting - variable width block element method (1)
In practice At work, we will encounter the need to set the center for "block elements with variable widths", such as pagination navigation on a web page. Because the number of paginations is uncertain, we cannot limit its flexibility by setting the width. There are three methods for centering block elements with variable widths (these three methods are currently used more often): 1. Add the table tag 2. Set the display; inline method 3. Set position:relative and left:50%; Let’s look at the first method first: Step 1: Add a table tag (including
,
) outside the centered element that needs to be set. ,
). Step 2: Set the "left and right margins to be centered" for this table (this is the same method as the fixed-width block element). For example: html code:
☆Horizontal centering setting - variable width block element method (2)
The second method: change the display of the block-level element to inline type, and then use text-align:center to achieve centering Effect. The following example: html code:
The advantage of this method compared to the first method is that there is no need to add unsemantic tags, which simplifies the nesting depth of tags. But there are also some problems: it changes the display type of the block element to inline, turning it into an inline element, so it loses some functions, such as setting the length value. (The effect picture is as shown in the method one)
☆Horizontal centering setting - variable width block element method (3)
Method three: By setting float to the parent element, Then set position:relative and left:50% for the parent element, and set position:relative and left:-50% for the child element to achieve horizontal centering. html code:
This method can retain block elements and still display them in the form of display:block. The advantage is that no silent discussion tags are added and no nesting is added. Depth, but its disadvantage is that position:relative is set, which brings certain side effects. These three methods are widely used and each has its own advantages and disadvantages. Which method to choose depends on the specific situation. (The effect picture is as shown in the method one)
Vertical centering setting
☆Vertical centering - a single line of text with a determined height of the parent element
The method of vertically centering a single line of text whose height is determined by the parent element is achieved by setting the height and line-height of the parent element to be consistent. The following code:
☆Vertical Centering - Multi-line text with a certain height of the parent element (Method 1)
There are two ways to vertically center multi-line text, pictures, and block elements with a certain height of the parent element: Method 1: Use insert table (including tbody, tr, td) tags, and set vertical-align: middle. Speaking of vertical centering, there is an attribute vertical-align in CSS for vertical centering, but this style will only take effect when the parent element is td or th. So we have to insert the table tag again. Let’s take a look at an example: html code:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
