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

2021-09-16

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

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

見本１ <center> を使う

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

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

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

詳しく解説

演習素材

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

上記の元コードはこちら

<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> を使う

上記のコードはこちら

<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;" > を使う

上記のコードはこちら

<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>

中心配置になりました。