CSS は、Elements_html/css_WEB-ITnose の垂直方向の中央揃えを実装します。-htmlチュートリアル-php.cn

CSS は、Elements_html/css_WEB-ITnose の垂直方向の中央揃えを実装します。

WBOY

リリース： 2016-06-24 11:38:27

オリジナル

1109 人が閲覧しました

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。