❶ ページは「箱の入れ子」でできている

AIエディターのページは、大きな箱の中に、ひと回り小さい箱が入った形でできています。外側から順に、次の4つです。

• セクション：いちばん外側の箱。ページの幅いっぱいに広がっています。
• コンテナ：セクションの中の箱。
• インナー：コンテナの中の箱。
• パーツ：見出しや画像、ボタンなどの中身。

パーツを選ぶと、パーツのまわりに色つきのラベルが出ます。このラベルの色は、この記事の図の色と同じです。

❷ なぜ左に寄ってしまうの？

新しくパーツを置くと、そのパーツを包むコンテナは、中身ぴったりの大きさで、左端にくっついた状態で作られます。

ぴったりの箱の中では、パーツは動けません。右側がどれだけ空いていても、真ん中には来ません。

そこで、ひと回り大きい外側の箱に「真ん中に置いて」と決めます。外側の箱が幅いっぱいに広がっていれば、その中でパーツを真ん中に置けます。

❸ 外側の箱で真ん中にそろえる

1⃣ AIエディターで、真ん中にしたいパーツをクリックします。
パーツの左上に、緑色のラベル「セクション › コンテナ › インナー › 見出し1」が出ます。

　　　🔻

2⃣ 緑色のラベルの中の「コンテナ」を押します。
青いラベル「コンテナ」に変われば、コンテナが選ばれています。

　　　🔻

3⃣ パーツの上に出ているメニューの「グループ編集」をONにします。
ラベルが「コンテナグループ」に変わり、枠がページの幅いっぱいに広がります。これが「外側の箱」です。

　　　🔻

4⃣ 画面右側の設定パネルの「要素の配置」で、「水平方向」と「垂直方向」を、どちらも「中央揃え」にします。

パーツが真ん中に来れば完了です。

❹ 箱ひとつずつに余白を入れて寄せるのは、おすすめしません

コンテナの「マージン（外側の余白）」を左右とも「auto」にしても、パーツは真ん中に来ます。見た目は同じです。

ただし、この方法は、あとからパーツを横に増やしたときに崩れます。

実際に、横に画像を1つ足してみました。

余白で寄せた場合：足した画像が右端に貼り付き、全体が右に偏りました。

外側の箱で寄せた場合：見出しと画像が、2つそろって真ん中に並びました。

余白で寄せると、増やすたびに箱ごとに設定し直す必要があります。寄せる設定は、外側の箱に1回だけ。これで、あとから増やしてもそろったままになります。