JavaScriptで縦位置を指定するには、style.verticalAlignを使用します。
サンプルソース
例)ボタンを押すと、上寄せ/中央/下寄せにする
1 2 3 4 |
function chgVAlign(idname, str){ var obj = document.getElementById(idname); obj.style.verticalAlign = str; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル</title> <script src="sample.js"></script> </head> <body> <div id="target" style="display:table-cell;">hoge</div> <input type="button" value=" 上寄せ " onclick="chgVAlign('target', 'top');" /> <input type="button" value=" 中央寄せ " onclick="chgVAlign('target', 'middle');" /> <input type="button" value=" 下寄せ " onclick="chgVAlign('target', 'bottom');" /> </body> </html> |
実行サンプル
ボタンを押すと、左寄せ/中央寄せ/右寄せ になります。
hoge
解説
- .verticalAlignに文字列として'top'、'middle'、'bottom'を指定すればOKです。
- divタグ内の文字はそのままでは縦位置を指定できません。簡単に指定するには、divタグのstyleに「display:table-cell;」を指定する方法があります。