Here we score two things: the inline element or the block element, inside the block element is divided into a fixed-width block element, as well as an indefinite wide block element. Today, let's look at how inline elements are horizontally centered.
If the element is set to an inline element, such as text, picture, and so on, the horizontal center is implemented by setting the Text-align:center for the parent element. (Parent and child elements: in the following HTML code, the div is the parent element of the text that I want to be centered horizontally in the parent container.) The text is the sub-element of the DIV) and the following code:
HTML code:
<body> <div class= "Txtcenter" > I want to center the display horizontally in the parent container. </div> </body>css code:<style>. txtcenter{text-align:center;} </style>Second, the horizontal center setting: Fixed width block element
When the element is set as a block element, the use of Text-align:center does not work, then there are two cases: fixed-width block elements and variable-width block elements.
In this section we will first talk about fixed-width block elements. (Fixed-width block element: The width of the block element is a constant value.) )
Elements that satisfy a fixed width and block of two conditions can be centered by setting the left and right margin value to "auto". Let's look at an example of setting div as the block element horizontally centered:
HTML code:
<body> <div> I am a fixed width block element, haha, I want to horizontally center the display. </div> </body>css Code:<style> div{border:1px solid red;/* in order to display the center effect is clearly set the div border */width:200px;/* fixed Width */ margin:20px auto;/* Margin-left and margin-right set to Auto */} </style>Can also be written as:
Margin-left:auto; Margin-right:auto;
Note: the "Up and down margin" of an element can be set arbitrarily.
Three, Horizontal center summary: Indefinite wide block element method one
In the actual work we will encounter the need to set the "block element of the indefinite width" center, such as page navigation on the pages, because the number of paging is indeterminate, so we can not set the width to limit its elasticity. (Indefinite wide block element: the width of the block element is not fixed.) )
There are three ways to center a block element with an indefinite width (these three methods are currently used in many ways):
1. Add Table Label
2. Set Display:inline method: Similar to the first one, the display type is set to the inline element, and the property setting of the variable width element
3, set position:relative and left:50%: Use relative positioning method, the element to the left offset 50%, that is, to achieve the center of the purpose
This section is about the first method:
Why do I add a table label when I choose a method? is to use the length of the table label Adaptive-that is, does not define its length nor the length of the default parent element body (table whose length depends on the length of its text), so it can be regarded as a fixed-width block element, and then the fixed-width blocky-centered margin method, so that it horizontally centered.
First step: Add a table label (including <tbody>, <tr>, <td>) to the center of the element you want to set.
Step two: Set the "left and right margin center" for this table (this is the same as for a fixed-width block element).
Examples are as follows:
HTML code:
<div> <table> <tbody> <tr><td> <ul> <li> I'm the first line of text </li> <li> I am the second line of text </li> <li> I am the third line of text </li> </ul> </td></tr> </tbody> </table> </div>
CSS code:
<style> table{border:1px solid; margin:0 auto;} </style>Four, Horizontal Center summary: Variable width block element method two
In addition to the Insert Table label in the previous section, which allows for the horizontal centering of indeterminate block elements, this section describes the 2nd way to achieve this effect, changing the display type of the element to be the inline element, and using its properties to set directly.
The second method: Change the display of the block-level element to the inline type (set to the inline element), and then use Text-align:center to achieve the centering effect. Here's an example:
HTML code:
<body> <div class= "container" > <ul> <li><a href= "#" >1</a></li> <li> <a href= "#" >2</a></li><li><a href= "#" >3</a></li> </ul> </div > </body>
CSS code:
<style>. container{Text-align:center,}/* MARGIN:0;PADDING:0 (eliminates the gap between text and div border) */. Container ul{List-style:none ; margin:0; padding:0; Display:inline; }/* MARGIN-RIGHT:8PX (set the interval between li text) */. Container li{margin-right:8px; display:inline;} 3</style>This approach has the advantage of not adding no semantic tags to the first method, but there are some problems: it changes the display type of the block element to inline, so it has fewer functions, such as setting the length value.
Three, Horizontal Center summary: Variable width block element method three
In addition to inserting table labels in the first two sections and changing the display type of the elements, you can center the indeterminate blocks horizontally, this section describes the 3rd way to achieve this effect, setting up floating and relative positioning.
Method Three: Horizontally center by setting float for the parent element, then setting position:relative and left:50% for the parent element, setting position:relative and left:-50% for the child element.
We can understand this: supposedly the parent layer of the UL layer (that is, the DIV layer in the example below) has a split line in the middle of the UL layer of the parent layer (div layer) is divided into two parts, the UL layer of the CSS code is the top left of the UL layer and the parent layer of the UL layer (div layer) line alignment While the LI layer's CSS code is to align the Li Layer's split line with the top left of the UL layer (also the split line of the DIV layer) to achieve the center of the Li Layer.
The code is as follows:
<body> <div class= "container" > <ul> <li><a href= "#" >1</a></li> <li> <a href= "#" >2</a></li><li><a href= "#" >3</a></li> </ul> </div > </body>
CSS code:
<style>. container{float:left; position:relative; left:50%}. Container ul{list-style:none; margin:0; padding:0; position:relative; left:-50%; }. Container li{float:left; display:inline; margin-right:8px;} </style>These three methods are widely used, each with advantages and disadvantages, the specific choice of which method, depending on the circumstances.
Six, vertically centered: a single line of text that is determined by the parent element height
In the actual work we will also encounter the need to set vertical center of the scene, such as a lot of newspaper article title on the left and right side, often set to vertical center, for the user experience is good.
Here we also score two cases: the parent element is highly determined by the single line of text, and the parent element is highly determined by the multiline text.
In this section, let's look at the first single line of text with the height of the parent element, and how do you set it to be centered vertically?
The height of the parent element determines the vertical centering of a single line of text by setting the height of the parent element and the line-height to a high consistency. (Height: The height of the element, Line-height: As the name implies, row height (line spacing), refers to the distance between the line and the baseline in the text).
The difference between the calculated values of Line-height and Font-size, which becomes "line spacing" in CSS. Divided into two halves, added to the top and bottom of a text line of content, respectively.
This high line of text and block high consistency brings a disadvantage: when the length of the text content is greater than the width of the block, there is content out of the block.
The following code:
<div class= "Container" > hi,imooc! </div>
CSS code:
<style>. container{height:100px; line-height:100px; background: #999;} </style>Seven, vertical center: The parent element height determines the multiline text one
There are two ways to vertically center a parent element's height-determined multiline text, picture, and so on:
Method One: Use the Insert table (including TBODY, TR, TD) labels, and set the Vertical-align:middle.
CSS has a property vertical-align for vertical centering, which is useful for child elements of the Inline-block type when the parent element sets this style. Take a look at the example below:
HTML code:
<body> <table><tbody><tr><td class= "wrap" > <div> <p> See if I can center. </p> </div> </td></tr></tbody></table> </body>
CSS code:
Table Td{height:500px;background: #ccc}Because the TD label defaults to Vertical-align as middle by default, we don't need to set it explicitly.
Eight, vertical center: The parent element height determines the multi-line text two
This section describes another way to achieve this effect, except that the Insert Table label, which is described in the previous section, enables the vertical centering of multiline text that is highly determined by the parent element. But this method of compatibility is poor, just provide you learn reference.
In Chrome, Firefox and IE8 above the browser can be set block-level elements of display for Table-cell (set to table cells), activate Vertical-align properties, but note IE6, 7 does not support this style, compatibility is poor.
HTML code:
<div class= "Container" > <div> <p> See if I can center. </p> <p> See if I can center. </p> <p> See if I can center. </p> </div> </div>
CSS code:
<style> container{height:300px background: #ccc display:table-cell;/*ie8 above and Chrome, firefox*/vertical-align : Middle;/*ie8 above and Chrome, firefox*/} </style>The advantage of this method is not to add redundant meaningless tags, but the shortcomings are also obvious, it is not very good compatibility, incompatible with IE6, 7 and so modify the display block into a Table-cell, destroying the original block elements of the nature.
Ix. implicit modification of display type
One interesting phenomenon is that when you set one of the following 2 sentences for an element (regardless of what type of element was previously, Display:none):
Position:absolutefloat:left or Float:right
Simply put, as long as one of the above two sentences appears in the HTML code, the display type of the element will automatically be displayed as a display:inline-block (block Element), of course, the width and height of the element can be set, And the default width does not fill the parent element.
As the following code, the small partners know that a tag is an inline element, so setting its width is not effective, but set to Position:absolute later, it is OK.
<div class= "Container" > <a href= "#" title= "" > Enter course click here </a> </div>
CSS Code
<style>. Container a{position:absolute; width:200px; background: #ccc;} </style>The above is the "CSS Note 10" CSS style setting tips for the content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
