フォローする

【テクニック】画像の中央配置

ここではサイト上に挿入した画像を中央に配置させる方法をご紹介致します。

 

例えば、以下のように挿入した画像を、サイト画面の横幅からちょうど中央に

配置するには以下の設定を行います。

 

1.画像の選択

あらかじめ、中央に配置させたい画像をサイト上に挿入しておきます。
今回の「MAHALO SHOP」というロゴ画像は、web上で誰もが利用できる、オンラインエディター「サポルテ」を利用して作成しています。 誰でも無料で簡単にロゴなどを制作する事ができるので、一度お試しください!

https://suporte.jp/index.html

 

デザインパネル内「デザインタブ」を選択した状態で、中央に配置させたい画像をクリックします。
この時、デザインタブ内上部の「選択する」という項目が、 「イメージ[ファイル]」となるように選択しましょう。

 

2.マージンでの「auto」調整

1の状態で、デザインタブ内の「間隔」という項目の中の、

「マージン」を調整し、画像を中央に配置するよう設定します。

 

「マージン」の横の「+」マークをクリックすると、

「上」、「右」、「下」、「左」をという項目が出現します。

ここで、「右」と「左」の項目だけ、「auto」と記載してください。

半角でご記載ください。

すると以下画像のように画像上で均等に中央に配置されます。

 

 

before

 

after

 

以上となります。

マージンや余白調整でも画像配置の調整は可能ですが

ひとつのカラム内でぴたりとセンターに揃える場合には、便利ですのでご活用ください。

 

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント

Powered by Zendesk