ホームページ > 記事 > ウェブフロントエンド > CSS は、Elements_html/css_WEB-ITnose の垂直方向の中央揃えを実装します。
CSS は、Elements_html/css_WEB-ITnose の垂直方向の中央揃えを実装します。
- WBOYオリジナル
- 2016-06-24 11:38:271069ブラウズ
CSS は要素の垂直方向の中央揃えを実装します
要素の垂直方向の中央揃えについては、単行要素と複数行要素の場合に応じて説明します。
1. 親要素の高さが決定された単一行テキスト
親要素の高さが決定された単一行テキストの垂直方向の中央揃え方法は、親要素の高さと行の高さを設定することで実現されます。一貫している。
HTML 構造:
<div class="container"> Hello World!!!</div>
CSS スタイル:
<style> .container{ height:100px; line-height:100px; background:#999; }</style> 2. 親要素の高さが不明な複数行テキスト
親要素の高さが不明なテキストや画像などのブロックレベルの要素の垂直方向の中央揃えについても、同様です上下を設定できます。パディング値によってセンタリングを実現できます。この値はあまり大きくする必要はありません。3. 親要素の特定の高さを持つ複数行のテキスト
複数行のテキスト、画像、およびブロックレベルの要素はすべて、垂直方向の中央揃えには 2 つの主な方法があります。
1. tableの挿入
縦方向中央に配置する要素の外側にtable（tbody、tr、tdを含む）タグを挿入し、vertical-align: middleを設定します。
CSS には垂直方向の中央揃え用のプロパティvertical-align がありますが、このスタイルは親要素が td または th の場合にのみ有効であることにも注意してください。
HTML 構造:
<body> <table> <tbody> <tr> <td class="wrap"> <div> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> </div> </td> </tr> </tbody> </table></body>CSS スタイル:
table td{height:500px;background:#ccc} td タグはデフォルトで垂直方向の配置を中央に設定するため、明示的に設定する必要はありません。 2. ブロックレベルの要素の表示をテーブルセルに設定する
ブラウザ Chrome、Firefox、IE8 以降では、ブロックレベルの要素の表示をテーブルセルに設定し、vertical-align 属性をアクティブにすることができます。ただし、IE6 および 7 には注意してください。このスタイルはサポートされていません。
HTML 構造:
<div class="container"> <div> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> </div></div>CSS スタイル:
<style> .container{ height:300px; background:#ccc; display:table-cell; vertical-align:middle; }</style>
この方法の利点は、冗長な意味のないタグを追加する必要がないことですが、欠点も明らかであり、互換性はあまり良くなく、IE6 とは互換性がありません。と7。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。