This article brings to you the content is about the center of the HTML in the introduction of the Method (code), there is a certain reference value, the need for friends can refer to, I hope to help you.
Center horizontally
In the actual development process, we will encounter a lot of elements that need to be centered horizontally, such as the title of the article. There are two kinds of elements, block level element and block level element, which are divided into fixed width block and variable width block level elements. Fixed-width block-level elements as the name implies is a block-level element width is a fixed value, then the variable width block-level element we know is the block-level element width is not a fixed value case.
In-line elements
When the element being set is a text, picture, and other inline elements, we do this by setting the Text-align:center for the parent element.
<body> <div class= "Textcenter" > This is a center element in the parent element </div></body><style> textcenter{ text-align:center; } </style>The CSS style of the parent element of the text "This is a center element in the parent element" is added by the above code to Text-align:center, so the text is centered. However, when the element is set as block-level element, this method is not applicable, the case of block-level elements are divided into fixed-width block-level elements and variable-width block-level elements of two.
Fixed-width block-level elements
Satisfies the fixed width block level element "The fixed width" and "The Block level element" two condition to be possible to achieve the center by setting the left and right margin value to auto.
<body> <div> Fixed-width block-level elements in horizontal center </div></body><style> div{ border:1px solid Blue ; width:100px; /* Width Set fixed value */ margin:10px auto; } </style>/* or can also be written as Margin-left:auto; The upper and lower margin properties of the margin-right:auto;*//* element can be set as usual, unaffected by */Variable width block level element
There are three ways to center an indeterminate block-level element: The first is to add a table tag, and the second is to set the Display:inline method, which is similar to the first, the display type is set to the inline element, and the property setting for the variable-width element is set; The third method is setting the position: Relative and left:50%, using a relative positioning method, offset the element to the left by 50% to achieve the purpose of centering.
Add Table Label
Adding a table tag is the use of the table label's length adaptability (does not define its length nor the length of the default parent element body, the table length is based on the length of the inner text), so it can be thought of as a fixed-width block-level element. It is then centered horizontally by using the margin method centered on the fixed-width block-level element.
How to use the first step is to set the center of the element outside a table label, and then set the table "left and right margin center"
<div> <table> <tbody> <tr><td> <ul> <li> hoe wo Day copse </li> <li> Sweat Clay </li> <li> who knows plate Chinese </li> <li> granules all hard </li> </ul> </td></tr> </tbody> </table></div><style> table{ border:1px solid; margin:0 Auto; } </style>Set the Display:inline method
Change the display of block-level elements to the inline type, set to the inline elements, and then use Text-align:center to center the display. This method compared to the advantage of setting table is not to add no semantic tags, but there are some problems in this way, that is, it changes the display of block elements to inline, the elements become inline elements will be less functional use.
<body> <div class= "container" > <ul> <li><a href= "#" >First</a> </li> <li><a href= "#" >Second</a></li> <li><a href= "#" >third </a></li> </ul> </div></body> <style>.container{ text_align: Center;}. Container ul{ list-style:none; margin:0; padding:0; Display:inline;} . container Li{margin-right:10px;display:inline;} </style>Set Position:relative and left:50%
By setting float to the parent element and then setting position:relative and left:50%, the child elements are set position:relative and left:50% to achieve horizontal centering.
<body><div class= "Container" > <ul> <li><a href= "" #>first</a></li > <li><a href= "" #>second</a></li> <li><a href= "" #>third</a> </li> <li><a href= "" #>fourth</a></li> </ul></div></body > <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>Center vertically
Vertical centering is divided into two cases where the parent element is determined by the height of the single line of text and the height of the parent element determines the multiline text.
Single line of text for parent element height determination
The height of the parent element determines the vertical alignment of a single line of text by setting the height of the parent element and the line-height. Height is the level of the element, Line-height is the row height, which is the line spacing, which is the distance between the line and the baseline. The difference between the computed value of Line-height and Font-size is divided into two halves (called "line spacing" in CSS), and is added to the top and bottom of a text line content, respectively. The smallest box that can contain the content is the row box. This line of text high and block high consistent brings a disadvantage, that is, when the length of the text content is greater than the width of the block, there will be content out of the block.
<div class= "Container" > hello,world!</div> <style>.container{ height:10px; line-height:10px;} </style>Multi-line text with parent element height determination
There are two ways to vertically center a parent element's height-determined multiline text, a picture, and the first is to insert a table label and then set 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.
/* Mode one */<BODY><TABLE><TBODY><TR><TD class= "wrap" ><div> <p> Center < /p></div></td></tr></tbody></table></body> <style>table td{ height:500px; Background: #ccc;} </style>/* Mode two */<div class= "container" > <div> <p> Center next </p> <p> Center down </p> <p> Center next </p> <p> Center down </p> <p> Center next </p> </div></div><style>.container{ height:300px; Background: #ccc; Display:table-cell;/*ie8 above and Chrome, firefox*/ vertical-align:middle;/*ie8 above and Chrome, firefox*/}</style>In Chrome, Firefox and IE8 above the browser can be set block-level element display for Table-cell, activating vertical-align properties, but note IE6, 7 does not support this style.
Implicitly changing the display type
In our development process, when setting the Position:absolute or Float:left property for an element, the display type of the element will automatically be displayed as a display:inline_block (block-level element). You can set the width and height of an element.
<div class= "Container" > <a href= "#" title= "" > point here to see </a></div><style>.container a{ Position;absolute; width:200px; Background: #ccc;} </style>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
