「Wordpress」文字が中央寄せで左揃えってどうやるの？ HTML

文字が中央寄せで
左揃えってどうやるの？

本記事の概要

ブログ運営について

当ブログでは
よくお越しいただくお客様も
許可を取った上で稀に登場いたします
（仮名：Aさん/Bさん/お客様として）

宜しくお願いいたします

こんにちわー

Bさん

Rito

あら？今日はお1人？

いらっしゃーい♪

Aさんも誘ったのだけど
今日は用事があるみたいで；

Bさん

Rito

なるほどねー
ゆっくりして行ってー

相方

あらいらっしゃい♪

飲み物はお茶にする？
コーヒーにする？

それとも・・・
わ・た・し？♡

Rito

やめろ気色悪い・・・

じゃあ・・・
相方さん一つで~

Bさん

相方

まいどっ♪
相方一丁はいりまーす♪

ついていけん・・・

Rito

今回お邪魔した
理由なのですが
ちょっと
聞きたいことがあって

Bさん

相方

私のスリーサイズ？

Rito

そんなわけあるかっ！！

地味に知りたいかも・・・

Bさん

相方

えーっとね・・・
上から~・・・

Rito

他でやってくれ！！

冗談はさておき
この間ショートコードの
記事あったじゃないですか？

Bさん

冗談だったんか・・・

相方

Rito

・・・。

うんうん。
この間の記事ね。

その記事見てから
自分のブログを
色々いじろうとして
パンダさんの記事を
見てたのですが・・・

Bさん

Rito

ほうほう・・・

（なんかパンダってあだ名で定着してるな・・・）

文字を中央寄せにして
且つ左揃えにする方法が
わからなくて・・・

Bさん

相方

なるほどね♪
それなら
まずは私とハグをして
頭撫でてくれたら
教えてあｇ・・・

Rito

頼むからあっちに
行っててくれ・・・

中央揃えで文字を左揃えにする方法

Rito

僕はプログラマーではないから
わかる範囲で教えるねー

承知いたしましたー

Bさん

使うコード

<style>
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    background: #ffffff00;
  }
  .txt {
    display: inline-block;
    text-align: left;
  }
</style>
<div class="wrapper">
  <p class="txt"><b>
・文字<br>
・文字2
  </b></p>
</div>

Rito

ブロックエディタを
使っているなら
カスタムHTMLで
上記のコードを入れるだけ
です

ほうほう・・・
他になにか設定は
するんですか？

Bさん

Rito

いや、これだけです

カスタムHTMLに
それ入れるだけで
良いんですか？♪

Bさん

Rito

そうだよー

ちなみに

<style>
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    background: #ffffff00;
  }
  .txt {
    display: inline-block;
    text-align: left;
  }
</style>
<div class="wrapper">
  <p class="txt"><b>
・あいうえお<br>
・かきくけこ
  </b></p>
</div>

上記のように入れた場合は

このようになります

・あいうえお
・かきくけこ

これは上下ともに
同じ文字数だから
揃ってますけど
文字数が違った場合って
どうなりますか？

Bさん

Rito

例えば

通常の中央揃えだと

通常

・あいうえお
・かきくけこさしすせそ
・たちつてと

上記のようになってしまうのですが

先ほどのコードを使うと

・あいうえお
・かきくけこさしすせそ
・たちつてと

Rito

このようになります

おー理想形だ♪

Bさん

ちなみに

このコードは
inline-blockを利用して
中央寄せしているので
このようなコードを使用しています

コード内の「#ffffff00」の
カラーコードを変えることで
色付きの枠で囲う事もできます

<style>
  .wrapper {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    background: #e6e6fa;
  }
  .txt {
    display: inline-block;
    text-align: left;
  }
</style>
<div class="wrapper">
  <p class="txt"><b>
・あいうえお<br>
・かきくけこさしすせそ<br>
・たちつてと
  </b></p>
</div>