CSS advanced CSS skills sharing

How to set horizontal centering?

There are two situations: inline elements and block-level elements

1. Inline elements (such as pictures and text)

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

2. Block-level elements

Block The horizontal centering of level elements is divided into two types: fixed-width block elements and non-fixed-width block elements

Fixed-width block elements (that is, the width value of block elements is a fixed value ):

It can be achieved by setting the left and right margins of block-level elements to auto as follows

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

Block elements with variable width (that is, the width width is uncertain, such as paging navigation on a web page)

There are three methods (commonly used) to achieve horizontal centering of variable-width elements:

The first method: use the table tag

Use the length adaptability of the table tag---that is, not Defining its length does not default to the length of the parent element body (the length of the table is determined by the length of the text within it), so it can be regarded as a fixed-width block element, and then use the fixed-width block-shaped centered margin method to make it horizontal Centering

Step one: Add a table tag (including

, , ) outside the element that needs to be centered.

Step 2: Set the "left and right margins in the center" for this table (this is the same method as the fixed-width block element).

   table{
   margin: 0 auto;
   }
   ul{list-style:none;/*将小圆点去掉*/}
   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 inline type (set to display inline elements), and then use text-align:center to achieve the centering effect. The following example:

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

Compared with the first method, there is no need to add an unsemantic tag (table), but since li is regarded as an inline element, it cannot set attributes such as height and width for it

The third method: achieve horizontal centering by setting float for the parent element, then setting position:relative and left:50% for the parent element, and 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 to set vertical centering?

It is divided into two situations, a single line of text with a determined height of the parent element, and a multi-line text with a determined height of the parent element.

Single line text: Vertical centering is achieved by setting line-height to be consistent with height

The difference between the calculated values ​​of line-height and font-size becomes " Line spacing". Divide it into two halves and add them to the top and bottom of a line of text.

This kind of text line height and block height bring about a drawback: when the length of the text content is greater than the width of the block, the content is out of the block.

.container{
    line-height:100px;
    height:100px;
    background:purple;
}
<div class="container"><h1>Hello World!</div>

But this method has a drawback: when the length of the text is longer than the width of the block, the content falls out of the block.

Multi-line text:

There are two methods:

Use the table tag and use vertical-align:middle (note that the td tag has vertical-align set by default :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>

The last trick

Implicitly change the display attribute as an element. If you set one of the following two statements:

float:right or float:right

position:absolute

, the display type of the element will automatically change to display:inline- block At this point, you can 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>

The above is the detailed content of CSS advanced CSS skills sharing. For more information, please follow other related articles on the PHP Chinese website!