Diviでコンテンツを垂直方向に揃える方法

Diviを使用してサイトを構築するときにコンテンツを垂直方向に配置する機能は、デザインツールベルトに便利に追加できます。 特定のレイアウトでは、コンテンツをさまざまな方法（中央、下、上）で垂直方向に配置する必要がある場合があります。 最も一般的なニーズは、コンテンツを垂直方向の中央に配置することです。 コンテンツに複数の列レイアウトを使用する場合に非常に便利な、対称的な間隔の楽しいタッチを提供します。 さらに、垂直方向に中央揃えされたコンテンツは、さまざまなブラウザー幅の中央に配置されたままになります。これにより、カスタムのパディングやマージンを適用する手間が省け、同様の応答性が得られます。

このチュートリアルでは、CSSのいくつかの小さなスニペットを任意の列に追加して、コンテンツを垂直方向に整列させる方法を示します。 これを行う方法の例として、Diviの既成のレイアウトのいくつかを使用します。 CSSについてよく知らなくても、心配する必要はありません。 これは、数秒で独自のレイアウトに適用するのに十分簡単です。

FlexとDiviを理解する

Flex（またはFlexbox）cssプロパティは、要素を水平および/または垂直スタック（テーブルのようなもの）に配置するための単純な方法です。 ただし、従来のテーブルとは異なり、flexプロパティを使用すると、保持するコンテンツのサイズに合わせて調整または「フレックス」するボックスを作成できます。

行設定として「列の高さを均等化」を選択すると、Diviはflexプロパティを使用します。 これにより、列のサイズがすべて、コンテンツが最も多い列のサイズに調整されるようになります。 また、「列の高さを均等化」は行コンテナのフレックスをアクティブにするため、列にcssを追加して各列（またはボックス）の内容を調整することで、これを簡単に利用できます。

たとえば、行の任意の列に「margin：auto」を追加すると、その列のコンテンツ（1つ以上のモジュール）が垂直方向の中央に配置されます。

また、「align-items：center;」を追加した場合行に対して、すべての列（およびそのコンテンツ）は垂直方向の中央に配置されます。

もちろん、テーマに適用できるより高度なCSSに加えて、Webデザインのflexプロパティにはさらに多くの用途があります。 しかし、このチュートリアルでは、物事をシンプルに保ちたいと思いました。

これは本当に必要ですか？

技術的にはありません。 カスタム間隔（パディングとマージン）を使用して、列内のコンテンツ/モジュールを垂直方向に整列させることができます。 たとえば、Diviの間隔オプションを使用して、列の上下に等しいパディングを指定し、モジュールを列内で垂直方向に中央揃えにすることができます。 または、列に上部のパディングのみを追加して、コンテンツを下部に揃えることができます。 ただし、より多くのコンテンツでページを更新する場合は、間隔を調整する必要がある場合があります。 さらに、異なるブラウザ幅でこの配置を維持するのは難しい場合があります。

したがって、カスタム間隔を考慮せずにコンテンツを垂直方向に配置するソリューションを探している場合は、これが役立つと思います。

始めましょう！

既成のレイアウトをページにロードする

まず、インテリアデザイン会社のポートフォリオページレイアウトを使用します。 このレイアウトをページに表示するには、新しいページを作成します。 次に、ページにタイトルを付けます。 「DiviBuilderを使用」をクリックしてから「VisualBuilderを使用」をクリックします。 次に、「既成のレイアウトを選択」オプションを選択します。 次に、[ライブラリからロード]ポップアップからInterior Design Company LayoutPackを選択します。 最後に、レイアウトのリストから[ポートフォリオ]ページを選択し、[このレイアウトを使用]をクリックします。

レイアウトがページに読み込まれると、準備が整います。

方法1：フレックスと自動マージンを使用してコンテンツを垂直方向に整列する方法

ページの2番目の行（ページタイトルのある行のすぐ下の行）の行設定を開きます。 デザイン設定の切り替えで、[サイズ設定]オプショングループを開き、[列の高さを均等化]が既にアクティブになっていることを確認します。 これは、行にflexプロパティ（「display：flex;」）が追加されたことを意味します。

次に、同じ行の[詳細設定]タブ設定に移動し、[列2のメイン要素]入力ボックスの下に次のcssスニペットを追加します。

margin: auto;

これで、2番目の列の内容が垂直方向の中央に移動しました。

コンテンツを下揃えにする

すべてのモジュールが列の下部にスタックするようにコンテンツを下部に揃える場合は、次のようにマージン値を調整できます。

margin: auto auto 0;

行のすべての列のコンテンツを垂直方向に揃える

各列に「margin：auto」を個別に追加する代わりに、行設定のメイン要素に次のスニペットを追加することで、行のすべての列のコンテンツを垂直方向に中央揃えにすることもできます。

align-items: center;

または、列のすべてのコンテンツを下揃えにする場合は、次のスニペットを追加できます。

align-items: flex-end;

また、cssスニペットでメイン要素を右クリックして[メイン要素を拡張]をクリックすると、Diviのスタイルの拡張機能を利用できることを忘れないでください。

次に、そのメイン要素cssをページ（またはセクション）全体のすべての行に拡張して、ページ上のすべての列のすべてのコンテンツを垂直方向に中央揃えにします。

これで、すべてが垂直方向の中央に配置されます。

ただし、白い列の背景色が行の高さ全体に及ばなくなっていることに気付いたかもしれません。 これは、列に「margin：auto」を追加したためです。 これを修正するには、行の背景色を白に変更して、行のパディングを削除します。 ただし、代わりに、マージンを変更せずに列のコンテンツを中央に配置する方法を紹介します。

方法2：列の屈曲方向を使用してコンテンツを垂直方向に整列する

最初の方法では、行に追加されているflexプロパティを利用しました。 これにより、各列は、マージンを調整するだけで垂直方向に配置できる「フレックスボックス」になりました。

ただし、列（および列の背景）を同じサイズに保つ「列の高さを均等化」効果を失うことなく、列のコンテンツを整列するためにflex-directionを使用する方法もあります。 これを行うには、列内のすべてのモジュールが垂直に積み重ねられてから中央に配置されるように、列に数行のCSSを追加するだけです。

前の例の行に戻りましょう。 行設定を開き、カスタムCSSを右クリックして、[カスタムCSSスタイルのリセット]をクリックして、そこにあるカスタムCSSを取り出します。

次に、列2のメイン要素の下に次のCSSを追加します。

display: flex;
flex-direction: column;
justify-content: center;

または、コンテンツを下揃えにしたい場合は、「justify-content：center」を「justify-content：flex-end」に変更するだけです。

この設定の優れている点は、コンテンツを垂直方向の中央に配置し、行を全幅にした場合、コンテンツは中央に配置されたままになることです。

さまざまな量のテキストを垂直に並べて宣伝文を作成する

列のコンテンツを垂直方向の中央に配置すると、宣伝文句にも役立ちます。 ご存知のように、すべての宣伝文が機能やサービスを説明するために使用される正確な量のテキストを持っているわけではありません。 これらの宣伝文を垂直方向の中央に配置すると、レイアウトに適したデザインを作成できます。

この例では、DigitalPaymentsホームページレイアウトの宣伝文句を垂直方向に揃えます。

まず、サイトがどのように見えるかをより現実的に表現するために、いくつかの異なる量の本文テキストを宣伝文に追加します。

次に、行の設定と「列の高さの均等化」に移動する必要があります。

これで、CSSスニペットを追加して、コンテンツを調整し、デザインを変更できます。

[行設定]の[詳細設定]タブで、[メイン要素]の下に次を追加することで、列のコンテンツを垂直方向に中央揃えできます。

align-items: center;

または、次のように変更して、下に揃えます。

align-items: flex-end;

または、カスタムcssスタイルをリセットし、次のカスタムマージンを追加して、最初の列を下に揃え、3番目の列を上に揃えることができます。

列1のメイン要素CSS：

margin: auto auto 0;

列3の主要要素CSS：

margin: 0 auto auto;

1列のレイアウトはどうですか？

技術的には、1列のコンテンツを垂直方向の中央に配置するためにcssスニペットやフレックスは必要ありません。 あなたがする必要があるのはあなたがあなたのコンテンツ（またはモジュール）の上下に等しい間隔を持っていることを確認することです。 ほとんどの場合、隣接するコンテンツを完全に整列させたいため、複数の列を持つレイアウトで垂直方向に中央揃えのコンテンツが必要になります。

たくさんのアプリケーション

Diviには、コンテンツを垂直方向に揃える便利なアプリケーションがたくさんあります。 これは、1つの列に見出しテキストがある2列のレイアウトのヘッダーで、もう1つの列のCTA（ボタン）が垂直方向の中央に配置されていることを確認する場合に便利です。 また、6列のレイアウトでロゴを垂直方向に中央揃えする場合にも役立ちます（特にロゴの寸法がわずかに異なる場合）。

最終的な考え

この方法はカスタムCSSのいくつかの小さなスニペットに依存していますが、このアプリケーションは、面倒なプロセスの迅速な修正を探している人にとって非常に役立つと思います。 これが役立つかもしれない他の例を聞いてみたいです。

以下であなたのアイデアやコメントを自由に共有してください。

乾杯！