Home > Developer > Web Develop
We often encounter the need to set the horizontal center scene in the actual work, today we will see how to set the horizontal center.
If the element is set as a text, picture, and other inline elements, the horizontal center is implemented by setting the parent element text-align:center . The following code:
HTML code:
<body> <div class= "Txtcenter" > I am text, haha, I want to center the display horizontally in the parent container. </div></body>
CSS code:
<style> div.txtcenter{ text-align:center; } </style>Set the picture on the right side to the horizontal center display.
<! DOCTYPE Html>"Utf-8"><title> fixed width block element Horizontal center </title><style>div{border:1px solid red; margin:20px;} div.txtcenter{text-Align:center;} div.imgcenter{text-Align:center;}</style>class="Txtcenter"> I am text, haha, I want to center the display horizontally in the parent container. </div><!--Here is the task section--><divclass="Imgcenter">"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg"/></div></body>View CodeCenter horizontally setting-fixed width block elementWhen 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.
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:500px;/* Fixed Width */ margin:20px auto;/* Margin-left and Margin-right are 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.
<! DOCTYPE html>"content-type" content= " text/html; Charset=utf-8 "><title> fixed width block element Horizontal center </title><style>div{ border:1px solid red; width:500px; margin:20px Auto;} </style>View CodeHorizontal Center Summary-variable width block element method (i)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.
There are three ways to center the indeterminate width of a block element (these three methods are currently used in more than one):
- Add Table Label
- Set the Display;inline method
- Set position:relative and left:50%;
In this section we'll take a look at the first method:
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><a href= "#" >1</a></li> <li><a href= "#" >2</a></li> <li><a href= "#" >3</a></li> </ul> </td></tr> </tbody></table></div >
CSS code:
<style>table{ margin:0 Auto;} ul{list-style:none;margin:0;padding:0;} li{float:left;display:inline;margin-right:8px;} </style>
<! DOCTYPE Html>"Utf-8"><title> indefinite wide block element horizontal center </title><style>table{margin:0Auto;} Ul{list-style:none;margin:0;p adding:0;} li{float: left;display:inline;margin-right:8px;}/*here is the task area code*/. wrap{background: #ccc;}</style>"#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody></table></div><divclass="Wrap">set my div container to center horizontally</div></body>View CodeHorizontal Center Summary-variable width block element method (ii)The second method: Change the dispaly of the block-level element to the inline type, and then use the 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;}. Container ul{ list-style:none; margin:0; padding:0; Display:inline;}. Container li{ margin-right:8px; Display:inline;} </style>
This approach has the advantage of not adding no semantic tags and simplifying the nesting depth of the tags, but there are also some problems: it changes the display type of the block element to inline, so it has fewer features, such as setting the length value.
<! DOCTYPE Html>"Utf-8"><title> indefinite wide block element horizontal center </title><style>. Container{text-Align:center;}. Container Ul{list-style:none;margin:0;p adding:0;d Isplay:inline;}. Container Li{margin-Right:8px;display:inline;}</style>class="Container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body>View CodeHorizontal Center Summary-variable width block element method (iii)Method Three: By setting float for the parent element and then setting position:relative and left:50% for the parent element, the child elements are set position:relative and left:-50% to achieve horizontal centering.
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>
This method can retain the block elements are still displayed in the form of display:block, the advantages of not adding a non-negotiable table label, does not increase the nesting depth, but its disadvantage is to set up the position:relative, brought a certain side effects.
These three methods are widely used, each with advantages and disadvantages, the specific choice of which method, depending on the circumstances.
<! DOCTYPE Html>"Utf-8"><title> indefinite wide block element horizontal center </title><style>. container{float: Left; position:relative; Left: -%}.container ul{List-Style:none; Margin:0; padding:0; position:relative; Left:- -%;}. Container li{float: left;display:inline;margin-right:8px;}/*Here is the Code task area*/. Wrap-center{background: #ccc; }</style>class="Container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div><!--Below is the Code task area--><divclass="Wrap"> <divclass="Wrap-center"> Let's take a look at this approach. </div></div></body>View CodeWeb front-end Development Basics Lesson four (CSS tips)
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
