ホームページ ウェブフロントエンド htmlチュートリアル CSS は、horizo​​ntal|vertical centering_html/css_WEB-ITnose を実装します。

CSS は、horizo​​ntal|vertical centering_html/css_WEB-ITnose を実装します。

Jun 21, 2016 am 09:00 AM

元のリンク: 水平 | 垂直方向の中央揃えを実現するための CSS の説明

CSS を使用して要素を水平方向に中央揃えにするのは比較的シンプルで簡単です。行レベルの要素は親のテキストの中央揃えを設定します。要素、ブロック レベル要素の左右のマージンを auto に設定するだけです。縦と真ん中のオナニーに関しては、初めてオナホをする人の多くは私と同じで内心抵抗があると思います。ここでは、会社の同僚の内部共有に基づいて、それを収集して改良し、縦方向中央揃えの 8 つの CSS 記述方法を入手しました。サンプルデモと、コードと長所と短所についてのコメントがあります。

CSS は水平方向のセンタリングを実装します (3 つのメソッド)

CSS は垂直方向のセンタリングを実装します (8 つのメソッド)

CSS テキストの垂直方向のセンタリング (5 つのメソッド)[更新: 2016-01-06 ]

追伸: CSS に十分精通していれば、CSS の複数の属性と組み合わせることができる「奇妙なトリック」が無限にあるはずだと思います。ここでは、その一部を集めてみました。誰もがよく使う単純な部分です。

注: そうですね、週末は残業しなければならないので、必要に応じてブログ全体を作成するのはかなり時間がかかります。中心にある例を書いているときに、何も見つかりませんでした。適切な言葉を見つけたので、「Shi Xing Da Fa」という、Te Hu Zuo の自虐的でナンセンスな言葉を無理やり内容に記入しました。それができることを祈りながら、以下に投稿します。同僚と喜びを分かち合いましょう。

周末把码黄昏后,有咸香盈袖。莫道不消魂,独弄键盘,人比黄花瘦。真可谓:天堂有路你不走,学海无涯苦作舟。到头来:码山有路勤为径?三十功名尘与土。饶上个:一入'哀啼'深似海,从此'逍遥'没长'苏'。
ログイン後にコピー

追記: 2015 年 11 月 25 日の更新後、絶対センタリング をより包括的に説明する記事を CodePen で見ました。リンクは次のとおりです。 http://codepen .io /shshaw/full/gEiDt

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? Mar 18, 2025 pm 02:51 PM

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素? HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素? Mar 12, 2025 pm 04:08 PM

HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素?

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素? Mar 12, 2025 pm 04:05 PM

HTML5< time>を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素?

See all articles