Diviのテキストを縦方向で真ん中に持ってくる方法【ダウンロード可】

テキストモジュールを使っていて、テキストが縦方向で真ん中に持っていけない・・・」
「パディングを使って真ん中に持っていっても、画面の幅や文の長さによって調節しないといけない・・・」

こんな問題ありませんか?

Diviのテキストが上下方向で真ん中にこない

こういう状態です。
テキストが上に行ってしまってる状態。
実は昔はこの問題はなかったんです。
マージンの上と下を『auto』にするだけでよかったんです。
でもDiviのあるアップデートでおかしくなってしまいました。

この記事ではどうやってこの問題を解決するのか紹介します。

『行』の『列の高さ均等』を『はい』にする

『行』の『列の高さ均等を』を『はい』にする

このように行の設定へいき、『列の高さを均等割付』と書いてある項目を『はい』にします。
この設定後、特に何も変化がないように見えますが、実際は見えない部分で変化があります。

変換を保存します。

CSSを追加してDiviを直す

.et_pb_equal_columns > .et_pb_column {
  margin-top: auto;
  margin-bottom: auto;
}

このコードをどこでもいいので、サイト全体で使えるように追加します。
DiviのCSS追加の方法がわからない人はこの記事をみてください。
>>DiviでカスタムCSSを追加する4つの方法

このコードを追加したら、先ほどのページに戻ってみましょう。

Diviでテキストを真ん中に持ってくることができました

このようにテキストが真ん中にきます。
追加したCSSがサイト全体に適用してる限り、どのページでも同じように真ん中にきます。

今回作ったセクションをダウンロードできるようにしました。
tofutechschool.comの無料コースからダウンロードできます。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Scroll to Top