CSS辞典 vertical-alignプロパティの解説

行内やセル内の縦方向の揃え位置を指定する「vertical-alignプロパティ」使用方法を掲載

CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値baseline
適用される要素インラインレベルとテーブルセル要素
モジュールCSS Level 2(Revision 1)
継承なし

概要・使用方法

{vertical-align: 揃え位置;}Code language: CSS (css)

vertical-alignプロパティは、行内やセル内の縦方向の揃え位置(ベースライン)を指定します。

値の指定方法

autoブラウザによって自動的に調整。
use-script親要素のベースラインを参照して自動的に調整。
baseline親要素のベースラインの位置になります。
sub親要素の上付き文字の位置になります。
※テーブルセルへの指定不可
super親要素の下付き文字の位置になります。
※テーブルセルへの指定不可
top親要素、または先頭行のセルの上端と揃います。
bottom親要素、または先頭行のセルの下端と揃います。
middle半角英字の「x」の中央の高さに要素が揃います。
central親要素の中央の位置に揃える。
text-top親要素のフォントと要素の上端が揃います。
※テーブルセルへの指定不可
text-bottom親要素のフォントと要素の下端が揃います。
※テーブルセルへの指定不可
数値+単位ベースラインから移動する距離を単位付きの数値で指定。負の値の場合は下に移動する
%値要素の行の高さに対する割合(%)を指定する。

指定する単位付きの数字について

サンプルコード1

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>vertical-alignプロパティ CSSサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample1{height:10em;width:5em;}
          .sample2{vertical-align: top;height:10em;width:5em;}
          .sample3{vertical-align: middle;height:10em;width:5em;}
          .sample4{vertical-align: bottom;height:10em;width:5em;}
          .sample5{vertical-align: auto;height:10em;width:5em;}
          .sample6{vertical-align: central;height:10em;width:5em;}
          .sample7{vertical-align: use-script;height:10em;width:5em;}
    </style>
  </head>
  <body>
      <table border="1">
          <tr>
              <td class="sample1">normal</td>
              <td class="sample2">top</td>
              <td class="sample3">middle</td>
              <td class="sample4">bottom</td>
              <td class="sample5">auto</td>
              <td class="sample6">central</td>
              <td class="sample7">use-script</td>
          </tr>
      </table>
  </body>
</html>
実行結果
normaltopmiddlebottomautocentraluse-script

chrome 実行サンプル

vertical-alignプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

vertical-alignプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

vertical-alignプロパティのedgeブラウザの実行結果

opera 実行サンプル

vertical-alignプロパティのoperaブラウザの実行結果

サンプルコード2

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>vertical-alignプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .sample0{vertical-align: top;}
          .sample1{vertical-align: middle;}
          .sample2{vertical-align: bottom;}
    </style>
  </head>
  <body>
      <h1>top</h1>
      <p>夏の危険な生物<img src="./359600_s.jpg" width="25%" heght="25%"><span class="sample0">クラゲといわれる動物。</span></p>
      <h1>middle</h1>
      <p>夏の危険な生物<img src="./359600_s.jpg" width="25%" heght="25%"><span class="sample1">クラゲといわれる動物。</span></p>
      <h1>bottom</h1>
      <p>夏の危険な生物<img src="./359600_s.jpg" width="25%" heght="25%"><span class="sample2">クラゲといわれる動物。</span></p>
  </body>
</html>
実行結果

top

夏の危険な生物クラゲといわれる動物。

middle

夏の危険な生物クラゲといわれる動物。

bottom

夏の危険な生物クラゲといわれる動物。

すなりん

サイトの管理者「すなりん」です。現役のシステムエンジニアをしてます。要件定義からテスト、プロジェクトマネージャー、顧客調整、社内インフラなんでもこなします。いわゆるフルスタック・エンジニアです。 仕事柄色んな技術や製品を扱うことが多く、なかなか覚えているもの大変ですし、しばらくすると忘れてしまうことが多いので、自分なりの形で技術情報やIT関係の情報を掲載しています。 個人で仕事の合間をみながら記事の投稿やサイトを更新していますので、誤字や間違った内容があったりもしますので、閲覧者はご理解の上ご利用ください。

コメントを残す