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

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

センター配置にする方法

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressにTwitterを大きさを変更して埋め込む方法

Twitterの埋め込み表示を好みのカスタマイズをして表示させる方法を初心者でも簡単に解説、WordPressにタイムラインのツイートを高さや幅をやセンタリングしてブログに表示させる方法を解説。通常のブロックでTwitter埋め込み方法も記載します。

appuplink.info

2023.05.20

まとめ

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