//AdSenseにリンク

ワードプレスの画像やテキストをセンター(中心)配置するコード

ほげくん

テキスト、画像、リンク画像、地図…を中心に配置したい時にカスタムHTMLやテキストに記入するコード。

本文以外のサイドバーなどにも有効だよ。

こちらの2個のコードを紹介

見本1 <center> を使う

<center>~テキストなど~</center>

見本2 <div style="text-align:center;" > を使う

<div style="text-align:center;" >~画像やリンクなど~</div>

詳しく解説

演習素材

こちらの左揃えになっているロボ君のコードを書き換えて中心にするよ!

hogeくん

上記の元コードはこちら

<figure class="wp-block-image size-large is-resized"><img src="https://hoge-hoge.com/wp-content/uploads/2021/05/aftter-1-1024x1024.jpg" alt="hogeくん" class="wp-image-6" width="256" height="256"/></figure>

見本1 実例 <center> を使う

hogeくん

上記のコードはこちら

<center><figure class="wp-block-image size-large is-resized"><img src="https://hoge-hoge.com/wp-content/uploads/2021/05/aftter-1-1024x1024.jpg" alt="hogeくん" class="wp-image-6" width="256" height="256"/></figure></center>

中心配置になりました。

見本2 実例 <div style="text-align:center;" > を使う

hogeくん

上記のコードはこちら

<div style="text-align:center;" ><figure class="wp-block-image size-large is-resized"><img src="https://hoge-hoge.com/wp-content/uploads/2021/05/aftter-1-1024x1024.jpg" alt="hogeくん" class="wp-image-6" width="256" height="256"/></figure></div>

中心配置になりました。