Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

ブラウザ別、一行での両端揃えの方法

一行の文で右端と左端を揃えたデザインにしたい場合に使う方法が、ブラウザごとに違ったためまとめました。

スクリーンショット 2018-04-12 21.24.14.png
やりたいのはこうゆうこと。
右端と左端が縦に揃っているでしょう。

chrome, firefox

text-align-last: justify;
をつける。

<ul>
  <li>なす</li>
  <li>とまと</li>
  <li>きゅうり</li>
</ul>
ul {
  width: 100px;
}
li {
  text-align-last: justify;
}

IE,edge

日本語のように空白文字で区切らない言語はtext-align(-last)だけだと均等にならない。
text-justify:inter-ideographをつける必要がある。
text-justifyはIEが独自での採用したもので、inter-ideograph を指定すれば日本語・中国語・韓国語の文字間隔を調整して両端揃えにしてくれるそうです。

<ul>
  <li>なす</li>
  <li>とまと</li>
  <li>きゅうり</li>
</dl>
ul {
  width: 100px;
}
li {
  text-align-last: justify;
  text-justify:inter-ideograph;  
}

safari

safariではまだtext-align: justify;がうまく効いてくれません。なので、少しめんどくさい方法を取る必要があります。
一文字一文字をspan で囲って、親要素にdisplay:flex;justify-content: space-between;をつける。

<ul>
  <li>><span></span><span></span></li>
  <li><span></span><span></span><span></span></li>
  <li><span></span><span></span><span></span><span></span></li>
</ul>
ul{
  display:flex;
  justify-content: space-between;
}

まとめ

基本的にsafariは対象ブラウザになるかと思いますので、両端揃えをしようと思うと一番下の作業が必要になります。
結構な手間なので、文字数があまりに多い場合はデザイン自体を考え直した方が良いかもしれません。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
20
Help us understand the problem. What are the problem?