HTMLにおける表示属性の属性値とは何ですか？表示属性はどのようにして水平方向と垂直方向の中央揃えを実現しますか?-htmlチュートリアル-php.cn

HTMLにおける表示属性の属性値とは何ですか?どのような意味です？また、HTML の表示属性はどのようにして水平方向と垂直方向の中央揃えを実現するのでしょうか?今日の記事では、HTML の表示属性の値と、HTML の表示属性の値の水平方向と垂直方向の中央揃えを実現する方法を紹介します。2 つの方法を紹介します。

display ここでは、最も一般的に使用される 4 つの属性値、inline、block、inlin-block、none について説明します。

まず、inline (n inline 要素) について説明します。

この属性値はデフォルト値です。この要素は、要素の前後に改行のないインライン要素として表示されます。通常、この属性値は設定されません。私の個人的な理解では、通常の inline 要素と何ら変わりはなく、より一般的に使用されるのは inline-block です。

次に、block (ブロックレベル要素) の属性値があります。

この属性値は、改行の観点から、ブロックレベル要素が排他的な行を占めるように設定されています。 p タグと同じ効果がありますが、この属性値は設定されます。最後に、ブロックレベル要素として、幅、高さ、他のブロックレベル要素との間の距離のマージンプロパティ設定、およびスペースのパディング設定があります。 , ただし、行の高さを設定することはできません。

inline-block (インラインブロック) の属性値もあります。

この属性値は比較的強力です。私が最初に学習を始めたとき、基本的にこの属性を長く設定する必要があるとわかったときに設定しました。改行ではないのでブロックレベルの要素として使える一方で、初心者なので設定するのが面倒です。したがって、この属性値を使用して行の高さを設定すると、テキストを中央に揃えることができ、便利で使いやすくなります。

これらの属性は、block と inline-block の 2 つの属性値が主に同じ行内の複数の要素の実装として使用されます。 block は要素間の改行として使用されます。誰でも試してみることができます。

最後の属性値 none の場合:

個人的には、マウスがフローティングしているときに要素を非表示にする方が便利だと思います。要素の表示と非表示の効果を実現するには、display 属性値を変更します。

HTML で一般的に使用される表示の値は何ですか?

通常のプロジェクト開発で使いやすい HTML での表示の値は主に次のとおりです。

none (要素は表示されません);
block (要素は要素の前後に改行を入れて、ブロックレベルの要素として表示されます);要素の前後に改行を入れずにインライン要素として表示されます);

inline-block (インラインブロック要素。CSS2.1 の新しい値) (要素は次のように表示されます);テーブルの前後に改行がある、に似たブロックレベルのテーブル);

table-row (

に似たテーブル行として表示されます);

table-cell (要素は、

や	と同様に、表のセルとして表示されます)。ディスプレイは水平方向と垂直方向のセンタリングを実現します! 要素を水平方向と垂直方向に中央揃えするには、position と margin を使用します。これは誰もがよく知っており、頻繁に使用すると思います。しかし、要素を水平方向と垂直方向に中央揃えするために、display:table と table-cell を使用したことはあるでしょうか? 要素を水平方向と垂直方向に中央揃えにするには、display:table-cell を使用する 2 つの方法があります: 1. 要素を水平方向と垂直方向に中央揃えにするには、display:table と table-cell を使用します構造: <div class="wrap"> <div class="box"> <div class="con">梦幻雪冰</div> </div> </div> ログイン後にコピースタイル: .wrap { /让元素以表格形式渲染/ display: table; height: 400px; width: 400px; background: #fcf; } .box { /让元素以表格的单元素格形式渲染/ display: table-cell; /使用元素的垂直对齐/ vertical-align: middle; } .con { width: 200px; height: 200px; margin: 0 auto; background: #999; } ログイン後にコピー利点: このメソッドには、前の 2 つのメソッドのような高さの制限がないため、要素の内容に応じて高さを動的に変更できるため、スペースの制限がなく、要素の内容は変化しません。十分なスペースがないため、スクロールバーが途切れたり、醜くなったりします。短所: 欠点は何ですか?この方法は最新のブラウザにのみ適しており、IE6 ～ 7 では正しく動作しません。 2. 要素を水平方向と垂直方向に中央に配置するには、display: table-cell を使用します構造: <div class="wrap"> <div class="box"> 梦幻雪冰 </div> </div> ログイン後にコピースタイル: .wrap { display: table-cell; width: 400px; height: 400px; background: #fcf; vertical-align: middle; } .box { width: 200px; height: 200px; margin: 0 auto; background: #999; } ログイン後にコピー利点: この方法の利点は 3 番目の方法と同じです。身長差制限はありません。欠点: IE6 と IE7 はサポートされていません [関連推奨事項] HTML5 の Web とは何ですか? Webストレージの要素は何ですか? HTML IMG タグの属性は何ですか? IMGタグの使い方を学びましょう以上がHTMLにおける表示属性の属性値とは何ですか？表示属性はどのようにして水平方向と垂直方向の中央揃えを実現しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。関連ラベル： HTML中的display属性值有哪些 HTML中的display属性怎么实现水平垂直居中的ソース：php.cn 前の記事：ブラウザのカーネルとブラウザの互換性の問題の分析次の記事：XHTML と HTML の使用法の具体的な違いとそれらを区別する方法は何ですか? このウェブサイトの声明この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。著者別の最新記事 React フレームワークでは何ができるのでしょうか? React フレームワークの詳細な紹介 (完全な使用例付き) 2018-09-11 16:45:17 React を使用してアプリを構築するにはどうすればよいですか? React+Redux を使用して大規模アプリケーションを構築する手順の詳細 2018-09-11 16:39:07 React でログインを実装するにはどうすればよいですか? Reactログインモジュールの詳細説明 2018-09-11 16:29:40 リアクションの使い方は？ Reactの使い方を詳しく解説（例付き） 2018-09-11 16:10:13 React 16 の新機能は何ですか? React16の新機能・新機能の紹介 2018-09-11 16:05:55 反応についてどのような知識を学べばよいですか? React の知識ポイントの概要 (完全な例付き) 2018-09-11 16:01:50 反応の機能は何ですか? React 関数の詳細な分析 (例付き) 2018-09-11 15:55:13 Reactjsのライフサイクルは何ですか? Reactjs ライフサイクルの詳細な紹介 2018-09-11 15:50:18 React.jsの使い方は？ React.js の簡単な使い方の紹介 (例付き) 2018-09-11 15:43:40 React コンポーネント ref の用途は何ですか? React コンポーネントの refs の役割とその使用法の詳細な説明 2018-09-11 15:34:44 最新の問題 VSCode id 属性をカスタマイズするにはどうすればよいですか? 最近 Atom から VSCode に移行しました。エディタの大部分を自分の好みに合わせてカスタマイズすることができましたが、気に入っている Atom の機能がまだ欠けています。そ... から 2024-03-31 14:13:45 0 1 373 関連トピック詳細> JavaとJavaScriptの違いと関係 mysqlとsql_serverの違いデータインテリジェンスとは何を意味しますか? gpedit.msc を開けない場合はどうすればよいですか? Googleアカウントの登録方法 DLLの読み込みに失敗する問題の解決方法 mybatisの動作原理とプロセスは何ですか接続されているがインターネットにアクセスできない人気のおすすめ URLってどういう意味ですか？ DOM とはどういう意味ですか? 画像サイズを変更する方法 HTMLでフォントを太字にする方法 HTML画像のサイズを設定する方法人気のチュートリアル詳細> 関連するチュートリアル人気のおすすめ最新のコース最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース) 1417102 PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ 4258040 JAVA 初心者向けビデオチュートリアル 2477725 Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル 503993 PHP ゼロベースの入門チュートリアル 844296 最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース) 1417102 回の学習 JAVA 初心者向けビデオチュートリアル 2477725 回の学習 Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル 503993 回の学習 Web フロントエンド開発の簡単な紹介 215294 回の学習 PSビデオチュートリアルをゼロからマスターする 877551 回の学習 [Web フロントエンド] Node.js クイックスタート 6433 回の学習海外のWeb開発フルスタックコースの完全なコレクション 5053 回の学習 Go言語実践GraphQL 4247 回の学習 550W ファンマスターが JavaScript をゼロから段階的に学習します 633 回の学習 Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる 21606 回の学習最新のダウンロード詳細> ウェブエフェクト公式サイトサイト素材フロントエンドテンプレート [フォームボタン] jQuery エンタープライズメッセージフォームの連絡先コード [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果 [メニューナビゲーション] HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果 [フォームボタン] jQuery ビジュアルフォームのドラッグアンドドロップ編集コード [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤーコード [html5特殊効果] 古典的な HTML5 プッシュボックスゲーム [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール [フォトアルバム効果] CSS3 個人アルバムカバーホバーズーム効果 [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート [フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG) [PNG素材] 4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG) [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS） [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG） [PNG素材] 黒と白のスタイルの山アイコンベクター素材 (EPS+PNG) [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG） [バナー画像] フラットスタイルの植樹祭バナーベクター素材 (AI+EPS) [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG） [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート [フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート私たちについて免責事項 Sitemap PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

や

と同様に、表のセルとして表示されます)。

ディスプレイは水平方向と垂直方向のセンタリングを実現します!

要素を水平方向と垂直方向に中央揃えするには、position と margin を使用します。これは誰もがよく知っており、頻繁に使用すると思います。しかし、要素を水平方向と垂直方向に中央揃えするために、display:table と table-cell を使用したことはあるでしょうか?

要素を水平方向と垂直方向に中央揃えにするには、display:table-cell を使用する 2 つの方法があります:

1. 要素を水平方向と垂直方向に中央揃えにするには、display:table と table-cell を使用します

構造:

<div class="wrap">
 <div class="box">
  <div class="con">梦幻雪冰</div>
 </div>
</div>

ログイン後にコピー

スタイル:

.wrap {
    /*让元素以表格形式渲染*/
    display: table;
    height: 400px;
    width: 400px;
    background: #fcf;
}
.box {
    /*让元素以表格的单元素格形式渲染*/
    display: table-cell;
    /*使用元素的垂直对齐*/
    vertical-align: middle;
}
.con {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

ログイン後にコピー

利点:

このメソッドには、前の 2 つのメソッドのような高さの制限がないため、要素の内容に応じて高さを動的に変更できるため、スペースの制限がなく、要素の内容は変化しません。十分なスペースがないため、スクロールバーが途切れたり、醜くなったりします。短所:

欠点は何ですか?この方法は最新のブラウザにのみ適しており、IE6 ～ 7 では正しく動作しません。

2. 要素を水平方向と垂直方向に中央に配置するには、display: table-cell を使用します

構造:

<div class="wrap">
 <div class="box">
  梦幻雪冰
 </div>
</div>

ログイン後にコピー

スタイル:

.wrap {
    display: table-cell;
    width: 400px;
    height: 400px;
    background: #fcf;
    vertical-align: middle;
}
.box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #999;
}

ログイン後にコピー

利点:

この方法の利点は 3 番目の方法と同じです。身長差制限はありません。欠点:

IE6 と IE7 はサポートされていません

[関連推奨事項]

HTML5 の Web とは何ですか? Webストレージの要素は何ですか?

HTML IMG タグの属性は何ですか? IMGタグの使い方を学びましょう

以上がHTMLにおける表示属性の属性値とは何ですか？表示属性はどのようにして水平方向と垂直方向の中央揃えを実現しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。