CSS Advanced CSS tips for sharing

How do I set the horizontal center?

Inline and block-level elements in two different situations

1. Inline elements (piece text)

   div.textcenter{   text-align:center;   }   <div class= "Textcenter" >hello joe!</div>

2. Block-level elements

The horizontal center of block-level elements is divided into two kinds of fixed-width block elements and non-fixed-width block elements.

A fixed-width block element (that is, the width value of a block element is a fixed value):

This can be achieved by using the left and right margin of the block level element as auto.

   div{   border:1px solid red;   width:500px;/* */   margin:30px auto;/*margin-right margin-left for auto*/   }   <div>i am middle placed. </div>

Variable-width block elements (i.e., width uncertainty, for example, paging on a Web page)

There are three methods for horizontally centering an indefinite wide element (commonly used):

The first approach: using table tags

The length of the table tag is adaptive---it does not define its length or the length of the parent 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

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

   table{   margin:0 Auto;   }   ul{list-style:none;/* to remove the small dots */}   li{float:left;display:inline;margin-right:5px;}   <table>       <tbody>           <tr> <td>            <ul>                <li><a href= "#" >1</a ></li>                <li><a href= "#" >2</a></li>                 <li><a href= "#" >3</a ></li>                 <li><a href= "#" >4</a></li>             <ul>            </td></tr >       </tbody>   </table>

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:

   . container{   text-align:center;   }   . Container ul{   display:inine;   List-style:none;   padding:0;   margin:0;   }   . Container li{   display:inline;   margin-right:8px;   }

There is no need to add no semantic tags (table) compared to the first method, but because Li is considered an inline element, it is not possible to set height,width properties for it.

The third method is to achieve horizontal centering by setting float for the parent element and then setting position:relative and left:50% for the parent element, setting position:relative and left:-50% for the child element.

   . 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;   }   <div class= "Container" >     <ul>         <li><a href= "#" >1</a></li>         < Li><a href= "#" >2</a></li>         <li><a href= "#" >3</a></li>         < Li><a href= "#" >4</a></li>     </ul>   </div>

2. How do I set the vertical center?

In two cases, the parent element determines the height of a single line of text, and the parent element determines the height of the multiline text.

Single-line text: vertically centered by setting line-height and height uniformly

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.

. container{    line-height:100px;    height:100px;    Background:purple;} <div class= "Container" >

However, this method has a disadvantage: when the length of the text is longer than the width of the block, the content is separated from the block.

Multiple lines of text:

There are two ways of doing this:

Use the table label with Vertical-align:middle (note that the TD tag is set by default Vertical-align:middle

So we don't need to set it manually.

Table td{height:500px;background: #purple;} <table>    <tbody>    <tr><td>    <div>    I am centered<br>    I am centered<br>    I am centered<br>    I am centered<br>    I am centered<br>    </ div>    </tr></tr>    </tbody></table>

One last trick.

Implicitly change the properties of the display when you set one of the following two statements for an element:

Float:right or Float:right

Position:absolute

The display type of the element is automatically changed to Display:inline-block this allows you to set the width and height of the element, for example

<style type= "Text/css" >.container a{    Position:absolute;    width:100px;    height:50px;    Background:purple;} </style><body>    <div class= "container" >      <a href= "#" >          I am ceo,you son of bitch.      </a>    </div></body>