ポップアップのテキストを上下中央に配置する

ポップアップのテキストをCSSで上下中央に配置する方法を解説します。

本記事では、ポップアップ中のテキストエリアの上下位置をセンタリングするサンプルコードを提示します。

対象となるのは以下のポップアップテンプレートです(カード型/吹き出し型共通)。

サンプルコード

Sprocketの管理画面で、ステップ内のHTMLに下記のようなCSSを記述します。CSSは[見出し]と[本文]どちらのHTMLに記述しても構いません。

<style>
body > .spg-tour02 .spg-tour02-main .spg-tour02-content-column {
  display : table-cell;
  vertical-align : middle;
}
</style>