Web ページ全体にわたるセクション内の画像を垂直方向に配置するにはどうすればよいですか?

配置は、テキストや画像、ボタン、コンテンツ ボックスなどの要素を配置する場所を決定する際の鍵となります。レスポンシブ デザインの重要な要素は、Web サイト上のアイテムの配置です。スマートフォンなどの画面サイズが小さい端末からWebサイトを開くと、Webサイトのレイアウトや構造が事前に計画したものに適応するためです。

ただし、この変更は、アイテム間およびアイテム内の間隔、およびアイテムの整列および配置方法に影響を与えます。ボタンやフォームをクリックしたり入力したりできなかったり、正しく配置されていないとテキストの半分が画面から欠けてしまったりする場合があります。

この記事では、分割要素内の画像を垂直方向に整列させる方法について説明します。写真を縦に並べると、列に整理されます。これを画像の垂直方向の配置と呼びます。画像は、任意のテキストまたは他の画像自体と垂直方向に揃えることができます。これは、CSS グリッド、CSS フレックスボックス、垂直配置などのいくつかの CSS プロパティを使用することで実現できます。

CSS 垂直配置属性を使用する

Vertical-align – CSS のこのプロパティを使用して、要素の垂直方向の配置 を設定します。

＃＃＃文法＃＃＃ リーリー

値は次の方法で指定できます -

Length - 指定された長さだけ要素を上または下にプロモートします
%-要素を上げたり下げたりします
上、中、下、ベースラインなど、

• ＃＃＃＃＃＃イニシャル＃＃＃＃＃＃ ＃＃＃＃＃＃固有の＃＃＃＃＃＃

  ＃＃＃例＃＃＃
ここでは、
• vertical-align

  プロパティを使用して、画像をテキストと垂直方向に揃えます。

  リーリー
CSS フレックスボックスの使用

• CSS フレックスボックスと CSS グリッドを使用して、一連の要素を垂直方向に整列させることができます。

CSS Flexbox は、多くの Flex 要素を含むコンテナです。柔軟な要素は、必要に応じて行または列に配置できます。 Flex コンテナは親要素であり、Flex アイテムはその子です。

display:flex 開発者は、適切かつ魅力的に見えるように各コンポーネントのスタイルを設定できます。要素の子要素を行または列に配置します。

Flex コンテナにはさまざまなプロパティがあります。それらについては以下で説明します -

Flex-direction

– コンテナが Flex コンポーネントを積み重ねる方向を示すために使用されます。値 – 列、列反転、行、行反転

Flex-wrap

– Flex プロジェクトにラッピングが必要かどうかを指定または決定するために使用されます。値 – 改行、改行now

• Flex-flow – 開発者は flex-direction と flexwrap の両方を指定できます。値 - 行の折り返し、列の折り返しなど、

• Align-items – フレックス項目の配置を決定する機能

• 値 – センター、フレックススタート、フレックスエンド、スペースアラウンドなど、

• Flex-basis – フレックス項目の寸法を指定するために使用されます。

• Value - 長さ (cm、px、em) またはパーセンテージを指定できます。

• Justify-content – フレックス項目の配置にも使用されます。

• 値 – center、flex-start、flex-end、space-around など、

• Flex-shrink – 数値を値として受け入れます。項目の値が 3 の場合、値が 1 の場合の 3 倍に縮小します。

• Order - Flex 要素の配置順序を指定します。

• ＃＃＃例＃＃＃ リーリー

  CSS グリッドの使用 CSS グリッド機能のおかげで、フロートや配置を使用せずに Web ページを簡単に作成できます。CSS グリッド機能を使用すると、開発者はグリッドベースの行と列のレイアウト システムを構築できます。グリッド コンテナーは親要素です。

表示: グリッド

• 要素をグリッドとして作成するために使用されます。 一部の CSS グリッド プロパティは次のとおりです -

Grid-template-columns

– 列の作成に使用されます。これらの値は、長さ、% などの形式で表されます。

Grid-template-rows – 行の作成に使用されます。値は長さ、% などの形式で表されます。

Grid-gap

– これは、列ギャップと行ギャップの短縮形プロパティです。

• ＃＃＃例＃＃＃ リーリー ＃＃＃結論は＃＃＃ この記事では、Web ページ全体にわたるセクション内の画像を垂直方向に整列させるさまざまな方法について説明しました。

以上がWeb ページ全体にわたるセクション内の画像を垂直方向に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。