を含む) を追加します。
ステップ2：この表の「左右の余白を中央揃え」に設定します（固定幅ブロック要素と同じ方法です）。
例は以下の通りです:
htmlコード: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>不定宽块状元素水平居中</title> 6 <style> 7 table{ 8 margin:0 auto; 9 }10 ul{list-style:none;margin:0;padding:0;}11 li{float:left;display:inline;margin-right:8px;}12 </style>13 </head>14 <body>15 <div>16 <table>17 <tbody>18 <tr><td>19 <ul>20 <li><a href="#">1</a></li>21 <li><a href="#">2</a></li>22 <li><a href="#">3</a></li>23 </ul>24 </td></tr>25 </tbody>26 </table>27 </div>28 </body>29 </html>ログイン後にコピー レンダリングは次のとおりです: ☆水平方向のセンタリング設定 - 可変幅ブロック要素の方法(2) 2番目の方法: 変更ブロック レベルの要素 表示はインライン タイプであり、text-align:center を使用して中央揃え効果を実現します。次の例:
html コード: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>不定宽块状元素水平居中</title> 6 <style> 7 .container{text-align:center;} 8 .container ul{list-style:none;margin:0;padding:0;display:inline;} 9 .container li{margin-right:8px;display:inline;}10 </style>11 </head>12 13 <body>14 <div class="container">15 <ul>16 <li><a href="#">1</a></li>17 <li><a href="#">2</a></li>18 <li><a href="#">3</a></li>19 </ul>20 </div>21 </body>22 </html>ログイン後にコピー 最初の方法と比較したこの方法の利点は、非セマンティックなタグを追加する必要がなく、タグのネストの深さが単純化されることですが、いくつかの問題もあります。ブロック要素 表示タイプが inline に変更され、インライン要素となるため、長さの値の設定などの一部の機能が欠落しています。 (効果画像は方法その1の通りです) ☆水平センタリング設定 - 幅可変ブロック要素の方法(3) 方法3: 親要素にfloatを設定し、position:relativeとleftを設定する:50 を親要素%に設定し、子要素をposition:relativeおよびleft:-50%に設定して、水平方向のセンタリングを実現します。
html コード: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>不定宽块状元素水平居中</title> 6 <style> 7 .container{ 8 float:left; 9 position:relative;10 left:50%11 }12 .container ul{13 list-style:none;14 margin:0;15 padding:0;16 17 position:relative;18 left:-50%;19 }20 .container li{float:left;display:inline;margin-right:8px;}21 </style>22 </head>23 24 <body>25 <div class="container">26 <ul>27 <li><a href="#">1</a></li>28 <li><a href="#">2</a></li>29 <li><a href="#">3</a></li>30 </ul>31 </div>32 </body>33 </html>ログイン後にコピー このメソッドは、ブロック要素を保持したまま、display:block の形式で表示できるという利点がありますが、サイレント ディスカッション タグを追加せず、ネストの深さも増加しないことですが、欠点もあります。 Position:relative が設定されていると、特定の副作用が生じます。これら 3 つの方法は広く使用されており、それぞれに独自の長所と短所があり、どの方法を選択するかは状況に応じて異なります。 （効果の写真は方法その１の通りです） 垂直中央揃え設定 ☆垂直中央揃え - 親要素の高さが決定された単一行のテキスト 単一行の垂直中央揃え方法親要素の高さが決定されたテキストの親要素を設定するには、高さと行の高さの一貫性が高くなります。次のコード: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>垂直居中</title> 6 <style> 7 .wrap h2{ 8 margin:0; 9 height:100px;10 line-height:100px;11 background:#ccc;12 }13 </style>14 </head>15 <body>16 <div class="wrap">17 <h2>hello,world!</h2>18 </div>19 </body>20 </html>ログイン後にコピー レンダリング: ☆垂直方向の中央揃え - 親要素の高さを決定した複数行のテキスト (方法 1) 複数行のテキスト、画像、ブロック要素を垂直方向に中央揃えするには 2 つの方法があります:
方法 1: insert table (tbody、tr、td を含む) タグを使用し、vertical-align: middle を設定します。
垂直方向の中央揃えといえば、CSSに垂直方向の中央揃え用のvertical-align属性がありますが、このスタイルは親要素がtdかthの場合にのみ有効になります。したがって、再度 table タグを挿入する必要があります。以下の例を見てください:
html コード: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>父元素高度确定的多行文本</title> 6 <style> 7 .wrap{height:300px;background:#ccc} 8 </style> 9 </head>10 <body>11 <table><tbody><tr><td class="wrap">12 <div>13 <p>看我是否可以居中。</p>14 <p>看我是否可以居中。</p>15 <p>看我是否可以居中。</p>16 <p>看我是否可以居中。</p>17 <p>看我是否可以居中。</p>18 </div>19 </td></tr></tbody></table>20 </body>21 </html>ログイン後にコピー 注：因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。 效果图如下： ☆垂直居中-父元素高度确定的多行文本（方法二） 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
html代码： 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>父元素高度确定的多行文本</title> 6 <style> 7 .container{ 8 height:300px; 9 background:#ccc;10 display:table-cell;/*IE8以上及Chrome、Firefox*/11 vertical-align:middle;/*IE8以上及Chrome、Firefox*/12 }13 </style>14 </head>15 16 <body>17 <div class="container">18 <div>19 <p>看我是否可以居中。</p>20 <p>看我是否可以居中。</p>21 <p>看我是否可以居中。</p>22 <p>看我是否可以居中。</p>23 <p>看我是否可以居中。</p>24 </div>25 </div>26 </body>27 </html>ログイン後にコピー 这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。（效果图如方法一图） 隐形改变display类型 ☆隐形改变display类型 有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 两句之一：
position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然也可以设置元素的 width 和 height 了且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>隐性改变display类型</title> 6 <style> 7 .container a{ 8 position:absolute; 9 width:200px;10 background:#ccc;11 12 }13 </style>14 </head>15 <body>16 <div class="container">17 <a href="#" title="">查看效果</a>18 </div>19 </body>20 </html>ログイン後にコピー 效果图如下：
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2024-09-20 15:51:33
-
2024-09-20 15:47:32
-
2024-09-20 15:45:32
-
2024-09-20 15:39:32
-
2024-09-20 15:38:32
-
2024-09-20 15:27:32
-
2024-09-20 15:26:32
-
2024-09-20 15:12:32
-
2024-09-20 14:53:01
-
2024-09-20 14:51:01
| 
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
