Diviの同じ行に要素を揃える方法

垂直方向に整列させる機能 コンテンツ でサイトを作成するとき Divi デザインツールに便利に追加できます。 場合によっては、特定の規定により、 コンテンツ は、さまざまな方法 (中央揃え、下揃え、上揃え) で垂直方向に配置されます。 最も一般的なニーズは、中心に置くことです。 コンテンツ 垂直に。

コンテンツに複数の列レイアウトを使用する場合に便利な、対称的な間隔のおいしいタッチを提供します。 さらに、垂直方向に中央揃えのコンテンツは、さまざまなブラウザ幅の中央に配置されたままになるため、カスタムのパディングやマージンを適用して同様の応答性を実現する手間が省けます。

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

FlexとDiviについて

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

Divi 行パラメータとして「列の高さを均等にする」を選択すると、常に flex プロパティが使用されます。 これにより、列のサイズが最も多くのコンテンツを含む列のサイズに合わせて調整されるようになります。 また、「列の高さの均等化」により行コンテナーのフレックスが有効になるため、列に CSS を追加して各列 (または領域) の内容を調整することで、これを簡単に利用できます。

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

さらに、「align-items：center」を行に追加すると、すべての列（およびその内容）が垂直方向の中央に配置されます。

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

本当に必要ですか？

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

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

始めましょう！

事前定義されたレイアウトをページにロードします

まず、Interior DesignCompanyポートフォリオの範囲のレイアウトを使用します。 このレイアウトをページに表示するには、新しいページを作成します。 次に、ページにタイトルを付けます。 「DiviBuilderを使用」をクリックしてから「VisualBuilderを使用」をクリックします。 次に、「基本レイアウトの選択」オプションを選択します。 次に、[ライブラリからロード]ポップアップウィンドウからInterior DesignCompanyレイアウトキットを選択します。 最後に、レイアウトのリストから[ポートフォリオ]ページを選択し、[このレイアウトを使用]をクリックします。

レイアウトがページにロードされると、すぐに使用できます。

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

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

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

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

低いコンテンツを揃える

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

行のすべての列のコンテンツの垂直方向の配置

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

または、列のすべての内容を下部に揃える場合は、次の抜粋を追加できます。

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

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

これで、すべてが垂直方向に中央揃えになりました。

ただし、白い列の背景色が行の高さ全体をカバーしなくなったことにお気づきかもしれません。 これは、列に「margin：auto」を追加したためです。 この問題を解決するには、線の背景色を白に変更して、線から塗りつぶしを削除します。 ただし、代わりに、マージンを変更せずに列のコンテンツを中央に配置する方法を紹介します。

方法2：列の屈曲方向を使用してコンテンツを垂直に位置合わせする

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

ただし、列（および列の背景）を同じサイズに保つ「列の高さを均等化」効果を失うことなく、列の内容を揃えるフレックス方向の方法もあります。 これを行うには、列に数行のCSSを追加して、列内のすべてのモジュールが垂直に積み重ねられてから中央に配置されるようにします。

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

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

表示：フレックス; フレックス方向：列; justify-content：center;

または、コンテンツを一番下に揃えたい場合は、「コンテンツの正当化：センター」を「コンテンツの正当化：フレックスエンド」に置き換えます。

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

さまざまな量の垂直方向に配置されたテキストを使用して宣伝文（要約）を作成

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

この例では、ぼかしをDigitalPaymentsのホームページレイアウトに垂直に配置します。

最初に、さまざまな量の本文テキストをぼかしに追加して、サイトがどのように見えるかをより現実的に表現します。

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

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

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

または、それらを並べるために次のように変更します。

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

1列のCSSメイン要素：

3列のCSSメイン要素：

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

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

Diviの同じ行に要素を配置する方法を示すこのチュートリアルは以上です。