style.verticalAlignプロパティ

投稿日: 2013年11月7日 作成者: alphasis

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：親要素の設定を継承。

サンプル１


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

１－１ １－２ １－３
２－１ ２－２ ２－３
３－１ ３－２ ３－３

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

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

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

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>１－１</td>
  <td>１－２</td>
  <td>１－３</td>
 </tr>
 <tr>
  <td>２－１</td>
  <td>２－２</td>
  <td>２－３</td>
 </tr>
 <tr>
  <td>３－１</td>
  <td>３－２</td>
  <td>３－３</td>
 </tr>
</table>

CSS

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

サンプル２


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

行 親要素 サンプル

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

  • 「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%」と表示する。

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

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オブジェクト, テキスト, プロパティ, リファレンス パーマリンク