スポンサーリンク

カスタムHTMLのセンター中央寄せに配置の仕方・好きな配置にする

HTMLの配置変更方法Wordpress

画像や文章ではセンター配置は簡単に出来ますが。広告配置の際に通常のカスタムHTMLでは左の配置になってしまいます。
見た目的に左の配置では無くセンターに配置して見やすくしたい時に使える方法です。

スポンサーリンク
スポンサーリンク

センター配置にする方法

text-align: centerを使って、文字を中央寄せにする方法を紹介します。
text-alignは、入力したHTML要素を中央寄せ・右寄せ・左寄せになどにする為のCSSプロパティです。

中央だけじゃなく右寄せにも同様に使えますので覚えといて損は無いです。

センター寄せのCSSプロパティ例

デフォルトの左広告配置
写真データーです

通常で広告のHTMLを貼っただけでは上記画像の様に左側になります。
記載する内容では位置を変更してい時があります、カスタムHTMLに追記する事で変更出来ます。

  1. <div style="text-align: center">
  2. カスタムHTML挿入で中央寄せ
  3. </div>

コードサンプルの【center】部分を変更する事で左右寄せにも出来ます。

  • center】 センター寄せ
  • left】左寄せ
  • right】右寄せ

コードサンプルを配置したコード例。

コードサンプル例
コードサンプル例

上記コードを入力した場合の表示です。

配置がセンターになりました。(スマホでは違いが分からない事があります)
コードの【centerleft】・【right】に入れ替えるだけで左寄せや右寄せに出来ます。

画像をセンター寄せのCSSプロパティ例

画像ブロック入力配置変更

ブロック単位では画像の配置は簡単に出来ますが、画像データーもテキストと同じようにCSSでも変更出来ます。

画像も同様にセンター寄せに出来ます、画像には画像イメージのタグだけを囲っても出来ません。全てのタグを選択出来る様にして下さい。

  1. <div style="text-align: center">
  2. <img src="画像ファイルパス" />で画像も中央寄せ
  3. </div>

Twitterの配置カスタマイズなども出来ます。

まとめ

知っておくと意外と簡単にセンター配置や右寄せなどが出来ます、中央寄せは頻繁に使いたい時がありますので覚えて配置をカスタマイズしましょう。

コメント