トップページ >  Style Sheet >  縦方向に揃える
初版2008/11/12： 最終更新日2008/11/12
縦方向に揃える
目次
・縦方向に揃える
・同じ行にボタンがあると上手く動作しない
縦方向に揃える
縦方向に揃えるにはvertical-alignを指定します。
インライン要素に指定することが出来ます。テーブル要素にも指定できるようです。
vertical-alignに指定できる値は以下の通りです。他にもあるようです。

baselineデフォルト値です
top上揃えにします
middle中央揃えにします
bottom下揃えにします
px(em)指定直接単位を指定し、下に移動させる場合はマイナス値を指定します


同じ行にボタンがあると上手く動作しない
以下のソースのように同じ行にボタンがあるとmiddleと指定しても上手く動作しませんでした。
対処方法として単位指定して対応しました。

middletopbottompx
test test test test 
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
  <tr>
    <td>
      <input type="button" value="ボタン" style="width:40px;height:50px" />
      <span style="vertical-align:middle;">test</span><!-- middleのみ動作しない -->
    </td>
    <td>
      <input type="button" value="ボタン" style="width:40px;height:50px" />
      <span style="vertical-align:top;">test</span>
    </td>
    <td>
      <input type="button" value="ボタン" style="width:40px;height:50px" />
      <span style="vertical-align:bottom;">test</span>
    </td>
    <td>
      <input type="button" value="ボタン" style="width:40px;height:50px" />
      <span style="vertical-align:17px;">test</span><-- 対処方法 -->
    </td>
  </tr>
</table>
</body>
</html>


HOME