Skip to main content

 

 

 

 
Language:
 
従来のWebアプリにのみ適用されます
 
 
OutSystems

Align Centerのリファレンス

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.center-align .center-align.flex-direction-row OrientationパラメータがHorizontalの場合
.center-align .center-align.flex-direction-column OrientationパラメータがVerticalの場合

高度なユースケース

カスタムコンテンツとの垂直整列を設定する

1.AlignCenterパターンをプレビューにドラッグします。

1.Orientationパラメータを「Vertical」に設定します。

![](<images/aligncenter-9-ss.png>)

1.画像を[Align Center]プレースホルダにドラッグし、border-radius-circleクラスを追加します。

1.コンテナを[AlignCenter]プレースホルダにドラッグし、水平位置を中央に設定します。

1.コンテナに、テキスト「Scott Ritchie」を含むTextウィジェットを追加し、スタイルクラスを「heading-4」に設定します。

1.テキスト「Marketing Communications Manager」を含む別のTextウィジェットを追加し、これをコンテナに含めます。

![](<images/aligncenter-10-ss.png>)

1.コンテナを[AlignCenter]プレースホルダにドラッグし、Textウィジェットを追加します。

1.テキスト「02 Jan」を入力し、スタイルクラスを「font-size-xs text-neutral-6」に設定します。

![](<images/aligncenter-11-ss.png>)

1.パブリッシュしてテストします。

![](<images/aligncenter-12.png>)
  • Was this article helpful?