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

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

本記事の概要

ブログ運営について

こんにちはー

いらっしゃーい♪

あら？
本日はおひとり？

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

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

あらいらっしゃい♪

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

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

やめろ気色悪い・・・

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

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

ついていけん・・・

今回お邪魔した
理由なのですが…

ちょっと
聞きたいことがあって

私のスリーサイズ？

そんなわけあるかっ！！

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

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

他でやってくれ！！

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

冗談だったんか・・・

・・・。

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

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

ほうほう・・・

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

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

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

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

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

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

使うコード



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

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

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

いや、これだけです♪

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

そうですー

ちなみに



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

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

このようになります

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

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

例えば

通常の中央揃えだと

通常

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

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

先ほどのコードを使うと

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

このようになります

おー理想形だ♪

ちなみに

このコードは
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>