Diviを使用してサイトを構築する場合、コンテンツを垂直方向に配置するオプションは、デザインツールキットに追加する価値のあるものになる可能性があります。 レイアウトによっては、コンテンツをさまざまな方法（中央、下、上）に垂直に配置する必要がある場合があります。 最も一般的な必要性は、材料を垂直に整列させることです。 これにより、コンテンツに対称的な間隔の素敵なタッチが追加されます。これは、複数の列レイアウトを使用する場合に非常に便利です。 さらに、垂直方向に中央に配置されたコンテンツは、ブラウザの幅全体で中央に配置されたままであるため、同様の応答性を実現するためにカスタムのパディングやマージンは必要ありません。
このレッスンでは、CSSの数行を使用して、任意の列のコンテンツを垂直方向に整列させる方法を説明します。 デモンストレーションの目的で、Diviのプレハブレイアウトのいくつかを使用します。 CSSに慣れていない場合でも、心配する必要はありません。 ほんの数秒で、これをデザインに適用できるようになります。
- FlexとDiviの違いを理解する
- これは必要ですか？
- 事前設定されたレイアウトをページに追加します。
- 方法1：コンテンツをフレックスおよび自動マージンで垂直方向に整列
- コンテンツを下部に揃える
- 行の列の垂直方向のコンテンツ配置
- 方法2：列の屈曲方向を使用してコンテンツを垂直に位置合わせする
- 1列しかないレイアウトはどうですか？
- DIVIの垂直および水平方向の配置に関する最終的な考え
FlexとDiviの違いを理解する
Flex（またはFlexbox）CSS属性は、アイテムを水平および垂直のスタック（テーブルのようなもの）に配置するための手段にすぎません。 ただし、通常のテーブルとは異なり、フレックス機能を使用すると、含まれるコンテンツのサイズに合わせて「フレックス」するボックスを作成できます。
行設定として「列の高さを均等化」を選択すると、Diviはflex属性を使用します。 簡単に言えば、これにより、すべての列のサイズが、最も多くの情報を含む列のサイズに調整されます。 「列の高さを均等化」は行コンテナのフレックスをトリガーするため、CSSを列に追加して各列（またはボックス）の内容を変更することで、これを利用できます。
あなたは「マージン：オート」を追加した場合の行の任意の列に、元のためにampル、その列の内容は、（それは、1つまたは複数のモジュールのかどうか）垂直方向に中央揃えされます。
「align-items：center;」を追加すると、すべての列（およびそのコンテンツ）が垂直方向に中央揃えになります。 あなたの列に。
もちろん、flexプロパティには、Webデザインでさらに多くのアプリケーションがあり、テーマで利用できるより高度なCSSがあります。 ただし、このチュートリアルでは物事をシンプルに保ちたいと思いました。
これは必要ですか？
技術的な意味では、違います。 カスタム間隔を使用して、コンテンツ/モジュールを列内に垂直に配置できます（パディングとマージン）。 EXのためにampルは、列に等しい上下のパディングを与えるために、垂直キュー内のモジュール（複数可）を中心にディビの間隔オプションを使用することができます。 列に上部のパディングを追加して、コンテンツを下揃えにすることもできます。 ページにコンテンツを追加するときは、間隔を変更する必要がある場合があります。 さらに、複数のブラウザサイズにわたってこの配置を維持すると、問題が発生する可能性があります。
したがって、特定の間隔を気にせずに情報を垂直方向に揃える方法を探しているのであれば、これは有益だと思います。
パーティを始めましょう！
事前設定されたレイアウトをページに追加します。
インテリアデザイン会社のポートフォリオページレイアウトから始めます。 新しいページを作成して、このレイアウトをページに配置します。 その後、ページに名前を付けます。 ドロップダウンメニューから[DiviBuilderを使用]、[VisualBuilderを使用]の順に選択します。 次に、ドロップダウンメニューから[既成のレイアウトを選択]を選択します。 次に、[ライブラリからロード]ウィンドウからInterior Design Company LayoutPackを選択します。 最後に、レイアウトの選択から、ポートフォリオページを選択し、「このレイアウトを使用」をクリックします。
レイアウトがページに読み込まれたら、開始する準備が整いました。
方法1：コンテンツをフレックスおよび自動マージンで垂直方向に整列
2番目の行（ページタイトルのある行のすぐ下の行）の行設定を開きます。 デザインオプションの[サイズ設定]オプショングループを切り替えて開き、[列の高さを均等化]が既にアクティブになっていることに注意してください。 これは、flexプロパティ（「display：flex;」）が行に追加されたことを意味します。
[列2のメイン要素]入力ボックスで、同じ行の[詳細設定]タブの設定に移動し、次のCSSスニペットを追加します。
2番目の列のコンテンツは、垂直方向の中央に移動するように再配置されました。
| 01 | マージン：自動; |
コンテンツを下部に揃える
次のようにマージン値を変更して、すべてのモジュールが列の下部にスタックするようにコンテンツを下部に揃えることができます。
| 01 | マージン：自動0; |
行の列の垂直方向のコンテンツ配置
各列に「margin：auto」を個別に追加するのではなく、行設定のメイン要素に次のスニペットを追加することで、行のすべての列のコンテンツを垂直方向に中央揃えにすることができます。
| 01 | align-items：center; |
列のすべての情報を下部に配置する場合は、このスニペットを使用することもできます。
| 01 | align-items：flex-end; |
CSSスニペットでメイン要素を右クリックして[メイン要素の拡張]を選択すると、Diviのスタイルの拡張機能を使用できることに注意してください。
次に、ページのすべての列のすべてのコンテンツを垂直方向に中央揃えにするには、メイン要素のCSSをページ（またはセクション）全体のすべての行に適用します。
これで、すべてが垂直方向にバランスされます。
ただし、列に「margin：auto」が追加されたため、白い列の背景色が行全体をカバーしなくなったことに気付いたかもしれません。 これを修正するには、行の背景色を白に変更し、行のパディングを削除します。 代わりに、余白を変更せずに列のコンテンツを中央に配置する方法を説明します。
方法2：列の屈曲方向を使用してコンテンツを垂直に位置合わせする
最初に行に追加されたflexプロパティを使用しました。 その結果、各列は、マージンを変更することで垂直方向に配置できる「フレックスボックス」になりました。
ただし、flex-directionを使用して、列（および列の背景）を同じサイズに保つ「列の高さを均等化」効果を犠牲にすることなく、列のテキストを揃えることができます。 これを実現するために、キューに数行のCSSを追加して、キュー内のすべてのモジュールを垂直にスタックしてから中央に配置します。
前の元へ戻りましょうampルの行。 カスタムCSSを右クリックし、[カスタムCSSスタイルのリセット]を選択すると、行設定にあるカスタムCSSを削除できます。
次に、列2のメイン要素で次のCSSを適用します。
| 010203 | 表示：flex; flex-direction：column; justify-content：center; |
「justify-content：center」を「justify-content：flex-end」に変更して、コンテンツを下揃えにします。
コンテンツを垂直に配置して行を全幅にすると、コンテンツは中央に配置されたままになるため、この構成が気に入っています。
さまざまな量のテキストを使用して垂直方向に整列した宣伝文を作成する
列のコンテンツを垂直方向の中央に配置することも、宣伝文句に役立ちます。 ご存知かもしれませんが、すべての宣伝文が機能やサービスを説明するために同じ量のテキストを持っているわけではありません。 これらの宣伝文句を垂直方向の中央に配置すると、レイアウトが美しく見えるようになります。
Digital Paymentsのホームページレイアウトでは、この例の宣伝文句を垂直方向に揃えamp。
サイトの外観をよりリアルに表現するために、最初にさまざまな量のボディコンテンツを宣伝文に追加します。
次に、行設定で「列の高さを均等化」する必要があります。
これで、CSSスニペットを使用して、テキストを配置し、デザインを調整できます。
行設定の[詳細設定]タブの[メイン要素]セクションに以下を追加することで、列のコンテンツを垂直方向に中央揃えできます。
| 01 | align-items：center; |
次のように変更して、下部に揃えてください。
| 01 | align-items：flex-end; |
カスタムCSSスタイルをリセットし、次のカスタムマージンを追加することで、最初の列を下揃えにし、3番目の列を上揃えにすることもできます。
列1のメイン要素CSS：
| 01 | マージン：自動自動0; |
列3のメイン要素CSS：
| 01 | マージン：0自動自動; |
1列しかないレイアウトはどうですか？
1列のコンテンツを垂直方向の中央に配置するためにCSSスニペットやフレックスは必要ありません。 あなたがしなければならないのはあなたのテキストが上下（またはモジュール）に等しい間隔を持っていることを確認することです。 ほとんどの消費者は、隣接する素材を正しく並べたいため、多くの列があるレイアウトで垂直方向に中央揃えのコンテンツを必要としています。
DIVIの垂直および水平方向の配置に関する最終的な考え
このソリューションはカスタムCSSのいくつかのマイナーなスニペットに依存していますが、時間のかかる手順の迅速な解決策を探している人には役立つと思います。 このアプローチにあなたの意見を共有すること自由に感じてください、だけでなく、元ampレ、それは過去にあなたの時間と労力を保存したかの。
Bedankt voor de duidelijkeuitleg。 Bijeenブログモジュールwerktdit echterniet。 ダンは、de row maar 1kolomにいます。 Het aantal blogs naastelkaarはbepaalddoor de module（デフォルトは3）です。 Zijn hier de kolommen ook gelijk te maken？
こんにちは、いいえ申し訳ありませんが、これは従来のDIVI列を対象としているだけです。DIVIブログモジュールには、列を整列するためのまったく異なるコードがあります。
モジュールを上から2/3の位置、または上から1/3の位置に配置し、真ん中の上部または下部に完全に配置しない場合はどうなりますか？
こんにちは。カスタムCSSを実行する必要があるのではないかと思います。デフォルトでは、そのようなオプションはありません。
コンテンツを中央に揃えてコンテンツにパディングを追加することもできますが、すべてのデバイスのレンダリングを注意深く確認してください。