Centering of CSS inline and block-level elements_html/css_WEB-ITnose

1. Horizontal centering

Inline elements are different from block-level elements. For inline elements, you only need to set text-align=center in the parent element;

For Block-level elements have the following centering methods:

1. Place the element in the table, then set the table's margin-left and margin-right to auto, center the table, and make the Block-level elements are centered, but this method does not comply with the specifications of semantic tags;

2. Convert the block-level elements to inline elements (by setting display:inline) and then center them. This method makes the centered elements It becomes an inline element and the width and height cannot be set;

3. Set the parent element float: left, position: relative, left: 50%; the child element float: left, position: relative, left: -50% , use the relative layout method to center. The above three methods each have their own advantages and disadvantages, and the specific choice depends on the usage scenario.

2. Vertical centering

1. For elements with known heights, you can set up and down padding Equal;

2. Set line-height and height to be equal

3. Use vertical-align, but this attribute is only applicable in tr and td, so the element can be placed in the table. Centered

Source code

 1  1 <!-- 水平居中 --> 2  2     <!-- 行?元素居中只需在父元素中?置text-align即可 --> 3  3     <div class="father"> 4  4         <p class="blockCenter"> 5  5             hehe</p> 6  6     </div> 7  7     <!-- table居中 --> 8  8     <table class="tableclass"> 9  9         <tr>10 10             <td>11 11                 <ul class="ulclass">12 12                     <li><a href="#">呵</a></li>13 13                 </ul>14 14             </td>15 15         </tr>16 16     </table>17 17     <table class="tableclass">18 18         <tr>19 19             <td>20 20                 <ul class="ulclass">21 21                     <li><a href="#">呵</a></li>22 22                     <li><a href="#">呵</a></li>23 23                     <li><a href="#">呵</a></li>24 24                 </ul>25 25             </td>26 26         </tr>27 27     </table>28 28     <table class="tableclass">29 29         <tr>30 30             <td>31 31                 <ul class="ulclass">32 32                     <li><a href="#">呵</a></li>33 33                     <li><a href="#">呵</a></li>34 34                     <li><a href="#">呵</a></li>35 35                     <li><a href="#">呵</a></li>36 36                     <li><a href="#">呵</a></li>37 37                 </ul>38 38             </td>39 39         </tr>40 40     </table>41 41     <!-- ???元素??行?元素在居中 -->42 42     <ul style="{text-align: center}">43 43         <li style="{display: inline}">nihao </li>44 44     </ul>45 45     <!-- 利用相??局 -->46 46     <ul class="relativeCenterFather">47 47         <li class="relativeCenterChild">你好 </li>48 48     </ul>49 49     50 50     <!-- ?直居中-->51 51     <!-- 1.?置相同的上下padding -->52 52     <!--  2.父元素height和line-height相同 -->53 53     <hr />54 54     <div style={background:#000;width:500px;color:#fff;line-height:100px;text-align:center}>55 55         我要???走就走的旅行56 56     </div>57 57     <!--3. vartical-align,??性只?tr,td起作用 -->58 58     <table>59 59         <tr verticla-align="center" height="100" background="#FF00FF">60 60             <td>一弦一柱思?年</td>61 61         </tr>62 62     </table>

css style

 1 <style type="text/css"> 2     .father 3     { 4         width:500px; 5     } 6     .inlineCenter 7     { 8         text-align:center; 9         float:left;10     }11     .blockCenter12     {13         width:100px;14         margin-left:auto;15         margin-right:auto;16         text-align:"center"17     }18     .tableclass19     {20         margin-left:auto;21         margin-right:auto;22     }23     .ulclass24     {25         list-style:none;26         margin:0;27         padding:0;28     }29        .ulclass li30        {31            float:left;32            display:inline;33            text-align:center;34        }35        .ulclass li a36        {37            text-align:center;38            float:left;39            background:#316AC5;40            color:#fff;41        }42     .ulclass li a:hover43     {44         background:#fff;45         color:#316AC5;46     }47     48     49     .relativeCenterFather50     {51         float:left;52         position:relative;53         left:50%54     }55     .relativeCenterChild56     {57         float:left;58         position:relative;59         left:-50%;60     }61     62     63     /* ?直居中*/64     .wrap65     {66         background:#000;67         width:500px;68         color:#fff;69         height:100px;70         line-height:100px;71     }72 </style>