ホームページ > 記事 > ウェブフロントエンド > CSS スタイルのデザインのヒント (水平センタリング、垂直センタリング)_html/css_WEB-ITnose
CSS スタイルのデザインのヒント (水平センタリング、垂直センタリング)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:47:191491ブラウズ
水平センタリング設定
(分からない表現がある場合は、私が投稿したエッセイ「html共通タグ」と「CSSまとめ(その1、その2、その2)」をすぐに閲覧して復習することができますまた）。
☆水平方向のセンタリング設定 - インライン要素
実際の仕事では、水平方向のセンタリングを設定する必要がある場面によく遭遇します。
設定した要素がtextやpictureなどのインライン要素の場合、親要素にtext-align:centerを設定することで水平方向のセンタリングが実現されます。以下のコード:
html コード:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定宽块状元素水平居中</title> 6 <style> 7 div{ 8 border:1px solid red; 9 margin:20px;10 }11 div.txtCenter{12 text-align:center;13 }14 </style>15 </head>16 <body>17 <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div>18 </body>19 </html>
レンダリングは次のようになります:
☆水平センタリング設定・固定幅ブロック要素
設定する要素が の場合は text-align を使用現時点では、固定幅のブロック要素と可変幅のブロック要素の 2 つの状況が考えられます。まず固定幅のブロック要素を見てみましょう。
固定幅とブロックの2つの条件を満たす要素は、「左右のマージン」の値を「自動」に設定することで中央揃えにすることができます。 div ブロック要素を水平方向に中央揃えに設定する例を見てみましょう:
html コード:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>定宽块状元素水平居中</title> 6 <style> 7 div{ 8 border:1px solid red; 9 width:500px;10 margin:20px auto;11 }12 </style>13 </head>14 <body>15 <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>16 </body>17 </html>
注: 要素の「上下のマージン」は任意に設定できます。
効果のイメージは以下の通りです:
☆水平方向のセンタリング設定 - 可変幅ブロック要素の方法(1)
実際の作業では「可変幅ブロック要素」の中心を設定する必要が出てきます。など、Web ページ上のページング ナビゲーションの場合、ページングの数は不確実であるため、幅を設定することで柔軟性を制限することはできません。
可変幅でブロック要素を中央に配置するには 3 つの方法があります (現在、これら 3 つの方法がよく使用されています):
1. table タグを追加します。
2. display;inline メソッドを設定します。
3. Position:relative および left:50 を設定します。 % ;
まず最初のメソッドを見てみましょう:
ステップ 1: 設定する必要がある中央の要素の外側に table タグ (92cee25da80fac49f6fb6eec5fd2c22a、a34de1251f0d9fe1e645927f19a896e8、b6c5a531a458a2e790c1fd6421739d1c を含む) を追加します。
ステップ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>
效果图如下：