配列の中身の値が何文字だろうと出力する時に、固定値分の枠をとりその中で中央揃えにできるか。

Question

タイトル通りです。

中身が「みかん」だろうが、「カーネーション」だろうが、全て10文字で中央揃えとしたいです。
「　　みかん　　」
「カーネーション」
こんなイメージです。

縦に並べた時に綺麗にしたい。少しのcssでこれは実現可能ですか?
またはphpで関数はありますか？

Comments

[Lhankor_Mhy]

プロポーショナルフォントですよね？
であれば、CSSだけでは無理です。

[plasticgrammer]

10文字を超えた場合、どうなることを期待していますでしょうか。

[退会済みユーザー]

>こえたばあい
超えないです。DBでもconstでもバリデーション等で制限かけてます。

[退会済みユーザー]

str_padをやってみたんですが、うまくいかず。

[Lhankor_Mhy]

え、超えないんですか？
それは質問に書いた方がいいのでは。「何文字だろうと」となっていれば、普通は10文字超も想定すると思いますが。

[Lhankor_Mhy]

あー、プロフィールを見た。修正依頼は無視する方針なのね。了解。

[m.ts10806]

>str_padをやってみたんですが、うまくいかず。

正しく使えてるかどうかコード提示されてないので判断できません

[m.ts10806]

あぁ、理解した。
場合により通報しますので。
私ならある程度自作します。自作なので要件満たすか知りませんし、作業依頼に応える気はないので、自分で何かしらやってみてから質問してください。

[plasticgrammer]

「全て10文字で中央揃えとしたい」という要件を理解できていないので教えてください。
例で挙げている「みかん」が３文字だとすると、
10文字とするために前に３文字分、後ろに４文字分のスペースを設けて中央寄せする
ということなのでしょうか。

[退会済みユーザー]

>plasticgrammer san
失礼しました。
自身で調べて、要件を変えようと思います。ちょっと複雑になったので。少々おまちお。

Answer 1

phpで文字数の調整でやるのでなければ
HTMLのセンタリングするだけでも良いと思います

<style>
.hoge{
width:200px;
  background-Color:yellow;
  text-align:center;
}
</style>
<div class="hoge">みかん</div>
<div class="hoge">カーネーション</div>

Answer 2

str_pad関数を使えばかんたんにできます。自分のポリシーとして、空白マージン分は一旦可視化させた方がいいとは思います。

1. 任意の文字の文字数を数える
2. 10から文字数を引いて差を求め、それを2で割る。
3. その値に対しstr_pad関数を使い*で埋める。
4. 任意の文字の前後に3を結合する。
5. その値の左右に境界線となる括弧をつける。
6. 置換で*を空白か空白制御用の記号などに置換する。