HTML elements are centered horizontally
Last Update:2016-07-30
Source: Internet
Author: User
<span id="Label3"></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 18px;">This article will briefly describe the basic method of centering Elements.</span></p></p><p><p></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘;">Code Area:</span></p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><!</span></span><span style="color: #ff00ff;"><span style="color: #ff00ff;">DOCTYPE HTML</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">HTML</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Lang</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "en"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Head</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Meta</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">CharSet</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "UTF-8"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">title</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Center<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">title</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span> <span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Head</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">H1</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "text-align:center"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>How elements in HTML are centered horizontally<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">H1</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "text-align:center;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>In-line elements<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> one</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "margin:0 auto; width:200px; text-align:center;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Fixed width block element<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Table</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Align</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "center"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">TR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">TD</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Indefinite wide block element, Method 1<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">TD</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">TR</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Table</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "text-align:center;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "display:inline-block;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Indefinite wide block element, Method 2<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "height:30px;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> at</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "float:left; position:relative;left:50%;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">style</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "position:relative;left: -50%;"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>Indefinite wide block element, Method 3<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Div</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">HTML</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><p><p></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 18px;">Body</span></p></p><p><p></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px; line-height: 1.5;">one, the need for horizontal centering of the element classification:</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">1, Inline Element (variable width).</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">2, Fixed width block element.</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">3, Variable width block element.</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">second, the basic method of Centering:</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">1, inline Elements: text-align:center;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">2, Fixed width block element: margin:0 auto;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">three, Indefinite wide block elements:</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">1. Convert to a fixed-width block element: enclose the element in a table, the table element will change its width with the content, and its width value can be obtained, then the table can be viewed as a fixed-width block Element.</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Code implementation:</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"><table style= "margin:0 auto;" ></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"><tr></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"><td></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"><div>align-center</div></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"></td></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"></tr></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"></table></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">2. Convert to inline element: encapsulates the element in a block parent element (width does not affect); sets the element inside the line, sets the parent element to the Center property (the child element in the parent element is centered by the parent Element's size, not the parent element).</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Code implementation:</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"><div class= "parent" style= "text-align:center;" ></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"><div style= "display:inline;" >align-center</div></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"></div></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">3. Using the Three-layer structure, the position property: the structure great-parent>parent>div;great-parent as the center of the reference body, the parent to the right offset 50% (great-parent as the basis), Div is offset to the left by 50% (parent is the base).</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Code implementation:</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"><div class= "great-parent" ></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"><div class= "parent"</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">style= "float:left;//gets the width of the content area;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">position:relative;left:50%; "></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"><div style= "position:relative;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">left:-50%; ">align-center</div></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"></div></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;"></div></span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Ideas</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Great-parent reference body; parent container; Div content;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Width of the width of the 1.parent =div;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">2.patent to the great-parent width as the base value, the right offset 50%; at this point, the parent and Div baseline (left critical line) reaches the great-parent axis;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">3.div is based on the width of the parent and is offset to the left by 50%, because the width of the parent is =div, so the center axis of the div coincides with the parent's baseline and the middle axis of the great-parent, reaching the effect of the div centered on the Great-parent.</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">* Difficulty: the role of float;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Because a block element with no width value is set, loading will inherit the width value of the parent Element.</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">The width value of all elements at the beginning is equal to the width of the great-parent;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">When "float=left;" is executed, the width value of the parent is re-assigned,</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">The value is from the width of its contents;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">Only Div in the parent, the browser calculates the size of the div, and the div itself does not set the width of the value, then continue to calculate the size of the contents of the div, div inside there are characters or other content, div will calculate the display size of these content;</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">The div then returns the value to the browser, and the browser assigns the value to the width value of the Parent.</span></p></p><p align="justify"><p align="justify"><span style="font-family: ‘Microsoft YaHei‘; font-size: 16px;">finally, because the width value of the parent is re-assigned, the Div inherits the new width value of the parent Again. The width of the parent =div the width of the =div interior Content.</span></p></p><p><p>HTML elements are centered horizontally</p></p></span>
