CSS インラインおよびブロックレベル要素の中央揃え_html/css_WEB-ITnose

1. 水平方向のセンタリング

インライン要素はブロックレベルの要素とは異なり、親要素に text-align=center を設定するだけで済みます。

ブロックレベルの要素には次のセンタリング方法があります。 :

1. テーブルに要素を配置し、テーブルの margin-left と margin-right を auto に設定し、テーブルを中央に配置し、テーブル内のブロック レベルの要素を中央に配置します。ただし、この方法はセマンティック タグに準拠していません。 . 仕様;

2. (display:inline を設定することで) ブロックレベルの要素をインライン要素に変換し、中央に配置する要素をインライン要素に変換します。

3. 親要素を float: left、position:relative、left: 50% に設定し、子要素を float: left、position:relative、left: -50% に設定し、相対レイアウト法を使用して中央に配置します。それぞれに長所と短所があり、具体的な選択は使用シナリオによって異なります。

2. 垂直方向のセンタリング

1. 高さがわかっている要素については、上部と下部のパディングを等しく設定できます。 line-height と height が等しくなるようにします

3.vertical-align を使用しますが、この属性は tr と td でのみ適用できるため、要素をテーブル内に配置して中央揃えにすることができます

ソースコード

 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 スタイル

 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>