style.verticalAlignプロパティ

style.verticalAlignは、要素のスタイル属性のverticalAlignプロパティの値を取得、もしくは、設定するプロパティ。

vertical-alignプロパティは、インライン要素やテーブル(表)のセルで使うことで、行内やセル内における垂直方向の配置を指定することができる。

構文

取得

var $verticalAlign = $elementReference.style.verticalAlign;

戻り値

要素のスタイル属性のverticalAlignプロパティの値。

設定

$elementReference.style.verticalAlign = "value";
value
下記の何れかの値を指定する。初期設定値は「baseline」。
  • baseline:要素のベースラインを、親要素のベースラインに揃える。
  • top:上揃え。要素の上端を、行内やセル内において一番背が高い要素の上端に揃える。
  • middle:中央揃え。
  • bottom:下揃え。
  • text-top:要素の上端を、親要素のテキストの上端に揃える。テーブルのセルへの指定は無効。
  • text-bottom:要素の下端を、親要素のテキストの下端に揃える。テーブルのセルへの指定は無効。
  • super:上付き文字。テーブルのセルへの指定は無効。
  • sub:下付き文字。テーブルのセルへの指定は無効。
  • length:「px」や「em」などの単位を付けた数値で指定。要素のベースラインを親要素のベースラインに揃えた状態を「0」とし、整数を指定すると上へ、負数を指定すると下へ配置する。
  • %:割合で指定。要素のベースラインを親要素のベースラインに揃えた状態を「0」とし、整数を指定すると上へ、負数を指定すると下へ配置する。
  • inherit:親要素の設定を継承。

サンプル1


テーブルのセルのvertical-alignプロパティの値:

1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3

サンプル1の動作について

  • 「baseline」ボタンをクリックすると、セル内のテキストをセル内の上部に配置する。「テーブルのセルのvertical-alignプロパティの値:」の右横に「baseline」と表示する。
  • 「top」ボタンをクリックすると、セル内のテキストをセル内の上部に配置する。「テーブルのセルのvertical-alignプロパティの値:」の右横に「top」と表示する。
  • 「middle」ボタンをクリックすると、セル内のテキストをセル内の中央に配置する。「テーブルのセルのvertical-alignプロパティの値:」の右横に「middle」と表示する。
  • 「bottom」ボタンをクリックすると、セル内のテキストをセル内の下部に配置する。「テーブルのセルのvertical-alignプロパティの値:」の右横に「bottom」と表示する。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
function setVerticalAlign1( $verticalAlign ) {
 var $elements = document.getElementById( "sample1" ).getElementsByTagName( "td" );
 for( $i=0; $i < $elements.length; $i++ ){
  $elements[$i].style.verticalAlign = $verticalAlign;
 }
 var $verticalAlign = $elements[0].style.verticalAlign;
 document.getElementById( "sampleOutput1" ).innerHTML = $verticalAlign;
}
</script>

HTML

<button onclick="setVerticalAlign1('baseline');">baseline</button>
<button onclick="setVerticalAlign1('top');">top</button>
<button onclick="setVerticalAlign1('middle');">middle</button>
<button onclick="setVerticalAlign1('bottom');">bottom</button>
<br />
<p>テーブルのセルのvertical-alignプロパティの値:<span id="sampleOutput1"></span></p>
<table id="sample1">
 <tr>
  <td>1-1</td>
  <td>1-2</td>
  <td>1-3</td>
 </tr>
 <tr>
  <td>2-1</td>
  <td>2-2</td>
  <td>2-3</td>
 </tr>
 <tr>
  <td>3-1</td>
  <td>3-2</td>
  <td>3-3</td>
 </tr>
</table>

CSS

<style>
#sample1 td {
 height: 70px;
}
</style>

サンプル2


サンプルのvertical-alignプロパティの値:

親要素 サンプル

サンプル2の動作について

  • 「baseline」ボタンをクリックすると、「サンプル」のベースラインを、「親要素」のベースラインに揃える。「サンプルのvertical-alignプロパティの値:」の右横に「baseline」と表示する。
  • 「top」ボタンをクリックすると、「サンプル」の上端を、「行」の上端に揃える。「サンプルのvertical-alignプロパティの値:」の右横に「top」と表示する。
  • 「middle」ボタンをクリックすると、「サンプル」の中央を、「親要素」の中央に揃える。「サンプルのvertical-alignプロパティの値:」の右横に「middle」と表示する。
  • 「bottom」ボタンをクリックすると、「サンプル」の下端を、「行」の下端に揃える。「サンプルのvertical-alignプロパティの値:」の右横に「bottom」と表示する。
  • 「text-top」ボタンをクリックすると、「サンプル」の上端を、「親要素」の上端に揃える。「サンプルのvertical-alignプロパティの値:」の右横に「text-top」と表示する。
  • 「text-bottom」ボタンをクリックすると、「サンプル」の下端を、「親要素」の下端に揃える。「サンプルのvertical-alignプロパティの値:」の右横に「text-bottom」と表示する。
  • 「super」ボタンをクリックすると、「サンプル」を上付き文字にする。「サンプルのvertical-alignプロパティの値:」の右横に「super」と表示する。
  • 「sub」ボタンをクリックすると、「サンプル」を下付き文字にする。「サンプルのvertical-alignプロパティの値:」の右横に「sub」と表示する。
  • 「5px」ボタンをクリックすると、「サンプル」のベースラインと「親要素」のベースラインを揃えた位置より「5px」上に配置する。「サンプルのvertical-alignプロパティの値:」の右横に「5px」と表示する。
  • 「10%」ボタンをクリックすると、「サンプル」のベースラインと「親要素」のベースラインを揃えた位置より「10%」上に配置する。「サンプルのvertical-alignプロパティの値:」の右横に「10%」と表示する。

サンプル2のソースコード

JavaScript

<script type="text/javascript">
function setVerticalAlign2( $verticalAlign ) {
 var $element = document.getElementById( "sample2" );
 $element.style.verticalAlign = $verticalAlign;
 var $verticalAlign = $element.style.verticalAlign;
 document.getElementById( "sampleOutput2" ).innerHTML = $verticalAlign;
}
</script>

HTML

<button onclick="setVerticalAlign2('baseline');">baseline</button>
<button onclick="setVerticalAlign2('top');">top</button>
<button onclick="setVerticalAlign2('middle');">middle</button>
<button onclick="setVerticalAlign2('bottom');">bottom</button>
<button onclick="setVerticalAlign2('text-top');">text-top</button>
<button onclick="setVerticalAlign2('text-bottom');">text-bottom</button>
<button onclick="setVerticalAlign2('super');">super</button>
<button onclick="setVerticalAlign2('sub');">sub</button>
<button onclick="setVerticalAlign2('5px');">5px</button>
<button onclick="setVerticalAlign2('10%');">10%</button>
<br />
<p>サンプルのvertical-alignプロパティの値:<span id="sampleOutput2"></span></p>
<div style="line-height: normal; background-color: pink;">
 <span style="font-size: 100px;"></span>
 <span style="font-size: 50px; background-color: yellow;">親要素
  <span id="sample2" style="font-size: 25px; background-color: cyan;">サンプル</span>
 </span>
</div>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, テキスト, プロパティ, リファレンス パーマリンク