div内の要素を垂直方向に整列させるにはどうすればよいですか?

次のいずれかの方法を使用して、div 内の要素を簡単に垂直方向に整列させることができます -

• 位置属性
• 行の高さ属性
• 属性を入力する

例を 1 つずつ見てみましょう -

position 属性を使用して div 内の要素を垂直方向に整列させる

position プロパティは要素の配置に使用されます。top、right、bottom、left プロパティと組み合わせて使用​​して、要素を必要な場所に配置できます。position プロパティの可能な値は次のとおりです-

• static - 要素ボックスは、通常のドキュメント フローの一部として、前の要素と次の要素に続いてレイアウトされます。

• relative - 要素のボックスは通常のフローの一部としてレイアウトされ、ある程度の距離だけオフセットされます。

• absolute - 要素のボックスは、それを含むブロックに対して相対的に配置され、ドキュメントの通常の流れから完全に削除されます。

• 修正済み - 要素ボックスは絶対位置にあり、動作の説明は「位置: 絶対」です。主な違いは、固定配置された要素を含むブロックが常にビューポートであることです。

次に、position 属性を使用して div 内の要素を垂直方向に整列させる例を見てみましょう -

Example

の中国語訳は次のとおりです:

Example

リーリー

line-height 属性を使用して div 内の要素を垂直方向に整列させる

line-height 属性は、テキスト行を構成するインライン ボックスの高さを変更します。 line-height -

に指定できる値は次のとおりです。

• normal - 要素内の行の高さを「適切な」距離に設定するようにブラウザに指示します。

• number - 要素内の行の実際の高さは、この値に要素のフォント サイズを掛けたものになります。

• length - 要素内の行の高さは指定された値です。

• パーセンテージ - 要素内の行の高さは、要素のフォント サイズのパーセンテージとして計算されます。

line-height 属性を使用して div 内の要素を垂直方向に整列させる例を見てみましょう -

Example

の中国語訳は次のとおりです:

Example

リーリー

padding 属性を使用して div 内の要素を垂直方向に整列させます

padding 属性を使用すると、要素のコンテンツとその境界線の間に表示されるスペースの量を指定できます。この属性の値は、長さ、パーセント、または単語継承である必要があります。値が継承の場合、そのパディングは親要素と同じになります。パーセンテージを使用する場合、パーセンテージは含まれるボックスを基準とします。

次の CSS プロパティを使用してリストを制御できます。次のプロパティ -

を使用して、ボックスの各辺に異なるパディング値を設定することもできます。

• padding-bottom は、要素の下部パディングを指定します。
• padding-top は、要素の上部のパディングを指定します。
• padding-left は、要素の左パディングを指定します。
• padding-right は、要素の右パディングを指定します。
• padding は、前述のプロパティの短縮形として機能します。

padding プロパティ -

を使用して div 内の要素を垂直方向に整列させる例を見てみましょう。

Example

の中国語訳は次のとおりです:

Example

ああああ

以上がdiv内の要素を垂直方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。