Home > Developer > Web Develop

CSS styling (centered horizontally, vertically centered)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, the horizontal center

Kinds Element properties Characteristics Example
inline element text, Inline elements such as pictures text-align:center   to implement

.imgcenter{
Text-align:center;
}

< Div class= "Imgcenter", </DIV>

<div class= "Txtcenter" > I want to center the display horizontally in the parent container. </div>

"I want to center horizontally in the parent container" is a text element, and is a sub-element of the Div, so we just need to set: Text-align: Center, you can

Block element Fixed-width block elements Fixed-width block element: The width of the block element is a constant value. ) Abbreviation:margin:20px auto; /*mardin-top and Margin-bottom are 20px; Margin-left and margin-right are set to Auto */
blocky elements of indefinite width The width of the block element is not fixed (width is determined by the content)

There are three ways to center the indeterminate width of a block element:

1. Add Table Label

Use the length of the table label for self-adaptability

---does not define its length nor the length of the default parent element body (the length of the table depends on the length of its text), so it can be regarded as a fixed-width block element , and then the method of the fixed-width blocky-centered margin is used to center it horizontally.

<table>
<tbody>
<tr><td>

　　　　　　<ul>

<li> I am 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>

<style>

table{
margin:0 Auto;
}

</style>

2, by setting the child element Display:inline method: Similar to the first, the display type is set to the inline element, the property of the variable width element is set

<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>
<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;  Centered, with three rows }/* margin-right:8px (sets the interval between li text) */.container li{    margin-right:8px;   display:inline;//In a row, only one row } </style>

3. By setting float to the parent element and then setting position:relative and left:50% for the parent element , the child elements are set position:relative and left : c23>-50% to achieve horizontal centering. 

<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>
<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>

Second, vertical center

Single line of text for parent element height determination 
<div class= "Container" >    hi,imooc!</div>
<style>.container{    height:100px;    line-height:100px;    Background: #999;} </style>
Parent element Height-determined multiline text, picture, etc.
 Method One: Use the Insert Table (including tbody,TR,TD) Labels and set vertical-align:Middle 
<body><table>< TBODY><TR><TD  class= "wrap" ><div> <p> see if I can center. </p></div></TD>  </tr></tbody></table> </body>  
table td{height:500px ; background: #ccc} 
  vertical-align by default because  td  label   for  middle, so we don't need to set it explicitly.
  method two: in  chrome, firefox  and  ie8  above the browser can be set block-level elements of the  display  for  table-cell (Set to table cell display), activates  vertical-align  property, but note  ie6, 7  does not support this style ,  compatibility is relatively poor. 
<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>

<style>.container{    height:300px;    Background: #ccc;    Display:table-cell;/*ie8 above and Chrome, firefox*/    vertical-align:middle;/*ie8 above and Chrome, firefox*/}</style>

CSS styling (centered horizontally, vertically centered)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More