HTMLにおける表示属性の属性値とは何ですか？表示属性はどのようにして水平方向と垂直方向の中央揃えを実現しますか?

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 の新しい値) (要素は次のように表示されます);テーブルの前後に改行がある、f5d188ed2c074f8b944552db028f98a1 に似たブロックレベルのテーブル);

• table-row (a34de1251f0d9fe1e645927f19a896e8 に似たテーブル行として表示されます);

table-cell (要素は、 b6c5a531a458a2e790c1fd6421739d1c や b4d429308760b6c2d20d6300079ed38e と同様に、表のセルとして表示されます)。
ディスプレイは水平方向と垂直方向のセンタリングを実現します!
要素を水平方向と垂直方向に中央揃えするには、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 サイトの他の関連記事を参照してください。