コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 複数行の水平方向と垂直方向のセンタリングに関するちょっとした研究 text_html/css_WEB-ITnose

複数行の水平方向と垂直方向のセンタリングに関するちょっとした研究 text_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 12:33:54
オリジナル
1187 人が閲覧しました

数日前に W3CPlus で CSS を使用して水平方向と垂直方向のセンタリングを作成するという記事を目にしました。6 番目のポイントをテストしたときに、いくつかの小さな問題が見つかりました:

意味のない新しいラベルが追加されました

<div id="extra">
ログイン後にコピー

コンテンツの幅を設定すると、テキストが折り返されます

最初の点については、解決策は :before 疑似要素を使用することです: 

 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>水平垂直居中</title> 6 <style> 7 .wrapper { 8     width: 200px; 9     height: 200px;10     background: skyblue;11 }12 .wrapper:before {13     content: '.';14     display: inline-block;15     vertical-align: middle;16     height: 100%;17 }18 .content {19     display: inline-block;20     text-align: center;21 }22 </style>23 </head>24 25 <body>26 <div class="wrapper">27   <div class="content">多行文字居中 多行文字居中 多行文字居中 </div>28 </div>29 </body>30 </html>
ログイン後にコピー

Demo添付

しかし!誰もが気づいています: テキストが折り返されています

これは問題を引き起こしているインラインブロックによって引き起こされたギャップです

この問題を解決するには、次のハックを試すことができます: 

1 .wrapper {2 font-size:03 }4 5 .content {6 font-size:16px7 }
ログイン後にコピー

保存してもう一度見てください:

完了!

完全なソースコードを添付

参考資料(推奨事項):

CSSによる水平・垂直中央揃えの作成

インラインブロック要素の空白を解決する方法

インラインブロックの過去と現在

関連ラベル：
关于多行文字水平垂直居中的一点研究
ソース：php.cn
前の記事：高さの最大値と最小値と高さのCSS高さ制御（互換バージョン）_html/css_WEB-ITnose（IE6） 次の記事：ie7 および ie8 のテーブルの td 列は固定幅であり、Curve solution_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
2187
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2334
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1961
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1846
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1899
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート