1. Horizontal centering setting: inline elements In actual work, we often encounter scenarios where horizontal centering needs to be set. For example, for the sake of beauty, the title of an article is generally displayed horizontally in the center.
Here we have two different situations: inline elements or block elements. Block elements are divided into fixed-width block elements and variable-width block elements. Today we first learn how to horizontally center inline elements?
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. (Parent element and child element: As in the following html code, div is the parent element of the text "I want to display it horizontally and centered in the parent container". On the contrary, this text is the child element of div) The following code:
2. Horizontal centering setting: fixed-width block element When the element to be set is a block element, using text-align: center will not work. At this time, it is also divided. Two situations: fixed-width block elements and variable-width block elements.
In this section, we will first talk about fixed-width block elements. (Fixed-width block elements: The width of block elements is a fixed value.)
Elements that meet the two conditions of fixed width and block can be realized by setting the "left and right margin" value to "auto" Centered. Let's look at an example of setting the div block element to be horizontally centered:
Note: the "upper and lower margin" of the element It can be set at will.
3. Summary of horizontal centering: Method 1 for block elements with variable width
In actual work, we will encounter the need to set the center for "block elements with variable width", such as on a web page Paging navigation, because the number of paging is uncertain, we cannot limit its flexibility by setting the width. (Variable-width block elements: The width of block elements is not fixed.)
There are three methods for centering block elements with variable widths (all three methods are currently used):
1. Add the table tag 2. Set display: inline method: Similar to the first method, set the display type to inline elements and set the attributes of variable-width elements 3. Set position: relative and left:50 %: Use relative positioning to offset the element by 50% to the left, that is, to achieve the purpose of centering.
This section will talk about the first method:
Why choose method one to join? The table tag? uses the length adaptability of the table tag—that is, it does not define its length and does not default to the length of the parent element body (the length of the table is determined according to the length of the text within it), so it can be regarded as a fixed-width block element, and then Use a fixed width block centered margin method to center it horizontally.
Step one: Add a table tag (including
,
,
) outside the centered element that needs to be set.
Step 2: Set the "left and right margins in the center" for this table (this is the same method as the fixed-width block element).
4. Summary of horizontal centering: variable width block element method 2 In addition to inserting the table tag mentioned in the previous section, which can center the variable-width block elements horizontally, this section introduces the second method to achieve this effect, changing the display type of the element to an inline element, using Its properties are set directly.
Second method: Change the display of the block-level element to inline type (set to inline element display), and then use text-align:center to achieve the centering effect. The following example:
The advantage of this method compared to the first method is that there is no need to add unsemantic 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.
3. Summary of horizontal centering: Method 3 of variable-width block elements In addition to inserting table tags and changing the display type of elements mentioned in the previous two sections, you can make variable-width block elements In addition to horizontal centering, this section introduces the third method to achieve this effect, which is achieved by setting floating and relative positioning.
Method 3: Achieve horizontal centering by setting float for the parent element, then setting position:relative and left:50% for the parent element, and setting position:relative and left: -50% for the child element.
We can understand it this way: Assume that there is a bisector in the middle of the parent layer of the ul layer (that is, the div layer in the example below) that divides the parent layer of the ul layer (div layer) into two parts. The css code is to align the leftmost end of the ul layer with the bisector of the ul layer's parent layer (div layer); while the css code for the li layer is to align the bisector of the li layer with the leftmost end of the ul layer (which is also the bisector of the div layer). Line) alignment to achieve centering of the li layer.
These three methods are widely used, each with its own advantages and disadvantages. Which method should be chosen specifically? It depends on the specific situation.
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)
