均等割付

https://gyazo.com/2f7e4eae234e43e3395796235fdecb1d

文字や画像の前後と間の空白文字の幅を調整して1行内に均等に割り付ける。

インデントは効く。

#　のあとに　＊　を入れて文字を拡大することは可能。

空白文字の個数で間隔の配分調整ができる。

画像のアスペクトは狂わない。

code:style.css

position: relative;

display: flex;

justify-content: space-between;

}

例）

[#***** 　わたしはカモメ　]

前後の空白文字と画像を行内に均等割して、画像のセンタリング！

ページ幅基準ではなく、行幅（インデント分を除いた残りの行端まで幅）を基準にして位置合わせします。

https://i.gyazo.com/7f07a7e1dc09013a548f7005461e72df.png

均等割付の裏技

前後や内部に空白を含んだ複数の文字を均等割付すると・・・

要素：char-index が対象となって、全体でセンタリングができません。　（泣）

https://i.gyazo.com/791858dbf229fd4738cc5ae6157c812e.png

文字列をまとめてセンタリングがしたいので・・・　

サイズ　1 ✕ 1 pixel　透明　PNG　で、　見えないOneDot画像を用意します。

その画像を貼ったページ　名称： _null　などを作って、　［_null.icon］ で　OneDot画像が呼び出せると便利。　

OneDotの 画像 や icon を 均等割付をしたい前後のスペーサーとして使います。　

センタリング

このようにすれば、右寄せにもなります。

[# [_null.icon] AAA BBB CCC]