ホームページ > 記事 > ウェブフロントエンド > 複数行の水平方向と垂直方向のセンタリングに関するちょっとした研究 text_html/css_WEB-ITnose
複数行の水平方向と垂直方向のセンタリングに関するちょっとした研究 text_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:33:541128ブラウズ
数日前に 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による水平・垂直中央揃えの作成
インラインブロック要素の空白を解決する方法
インラインブロックの過去と現在
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。