コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 垂直方向の中央揃え -- 親要素の高さが決定された単一行テキスト、親要素の高さが決定された複数行テキスト_html/css_WEB-ITnose

垂直方向の中央揃え -- 親要素の高さが決定された単一行テキスト、親要素の高さが決定された複数行テキスト_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:38:41
オリジナル
1247 人が閲覧しました

ステートメント: 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 ではそうではないことに注意してください。このスタイルをサポートします。 ❤️

関連ラベル：
垂直居中--父元素高度确定的单行文本、父元素高度确定的多行文本
ソース：php.cn
前の記事：チェックボックスを使用して純粋な CSS ドロップダウンを実装する box_html/css_WEB-ITnose 次の記事：範囲外のテキストを省略記号として自動的に表示する方法 (CSS)_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2330
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2468
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
2086
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1964
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
2038
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート