ホームページ > 記事 > ウェブフロントエンド > 垂直方向の中央揃え -- 親要素の高さが決定された単一行テキスト、親要素の高さが決定された複数行テキスト_html/css_WEB-ITnose
垂直方向の中央揃え -- 親要素の高さが決定された単一行テキスト、親要素の高さが決定された複数行テキスト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:38:411152ブラウズ
ステートメント: http://www.imooc.com/learn/9 より学習
親要素の高さが決定されるテキストの 1 行の垂直方向の中央揃えは、高さと行を設定することで実現されます
- 一貫性を持たせる親要素の高さ。
.container{ height:100px; line-height:100px; background:#999;} 親要素の一定の高さを持つ複数行のテキスト
table (tbody、tr、td を含む) タグを挿入し、vertical-align: middle を設定するために使用します。
<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>
table td{height:500px;background:#ccc} Chrome、Firefox、IE8 以降などのブラウザでは、ブロック レベルの要素の表示を table-cell に設定し、vertical-align 属性をアクティブにすることができますが、IE6 と 7 ではそうではないことに注意してください。このスタイルをサポートします。 ❤️
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。