【CSS】横並びにした要素を上揃いにする方法【一行追加でOK】

CSSで横並びさせる時ってどうしていますか？、、、display:inline-blockを使うことも少なくないと思いますが、これだと縦のラインが揃わないんですよね、そんな時はこれを使いましょう。

vertical-alignを使う

縦を揃えたい時はvertical-alignを使えば簡単です。例えば下のようなリストがあったとします。

HTML

<ul class="lists">
  <li class="list">Aブロック<br>aチーム</li>
  <li class="list">Bブロック<br>bチーム<br>cチーム</li>
  <li class="list">Cブロック<br>dチーム<br>eチーム<br>fチーム</li>
</ul>

CSS

.list {
  display: inline-block;
}

表示はこんな感じになります。

下揃いになっているのがわかります、これを変えたい時にvertical-alignを使います。

vertical-alignの使い方【1行追加するだけ】

前述したスタイルに一行だけ追加するだけでOKです。下記のように指定しましょう【上揃い】

CSS

.list {
  display: inline-block;
  vertical-align: top;
}

vertical-align: topを指定するだけでOK、すると。

見事に揃いましたね、ちなみに中央揃えにしたい場合は値をmiddleにすればOKです。

値を変えるだけで動作しますので、いろいろ試してみましょう。vertical-alignは知っておくべきスタイルの一つなのでこの機会に使えるようにしておきましょう！

他の人が読んでいる記事