静的コンテンツに含まれるボタンとテキストをセンタリングする

 以下のようなレイアウトを行いたい、という相談があったので考えてみました。

それぞれのコンポーネントは大まかに、以下のように配置します。

ページ・デザイナから見ると、以下のような配置になります。

残る作業はボタンとテキストのセンタリングです。

Oracle APEXのユニバーサル・テーマでは、Layout ModifiersがCSSのクラスとして定義されています。

https://apex.oracle.com/pls/apex/r/apex_pm/ut/layout-modifiers

この中のu-justify-content-centerを使えばセンタリングできそうに見えます。Layout Modifiersは以下のように指定します。

<div class="u-flex u-justify-content-center">

<div class="u-flex u-flex-direction-column">

<div>最初のアイテム</div>

<div>次のアイテム</div>

</div>

</div>

以下のような結果になります。

今回の要件では、それぞれのコンポーネントの列CSSクラスとして以下を設定します。

u-flex u-justify-content-center

CSSのフレックスボックスの知識があれば、display: flexとjustify-content: centerと同じ指定であることは想像がつくでしょう。

以上で記事の最初のレイアウトになります。

簡単なアプリケーションですが、エクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/button-and-text.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完