macoblog

「ゲーム × プログラミング」で生きていく

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

CSS

横並びにした要素の縦列を揃えたい、そんな時はスタイルを1行追加するだけでOKです。本記事では、CSS初心者や独学中の方向けに実際のコードを公開しながら解説しております。

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を使います。

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

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

CSS

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

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

vertical-alignにtopを指定した場合

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

vertical-alignにmiddleを指定した場合

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