- ベストアンサー
ボタンを中央寄せする方法
- 画面を<div>で左側、中央、右側と3分割し、中央に配置するボタンの水平方向と垂直方向を中央にする方法について教えてください。
- 質問者は、「＞＞」ボタンと「＜＜」ボタンを水平方向で中央、垂直方向で中央に配置したいと考えています。
- 現在のHTMLおよびCSSについても提供されています。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
.wrap{ display:table; } .wrap>div{ display:table-cell; vertical-align:middle; } を div.button_area の記述より後ろに加えてみてください。
その他の回答 (1)
- m_matsubara
- ベストアンサー率48% (80/166)
cssの悩ましいし、動作原理から考えればそりゃそうだって感じの問題ですが 高さをスタイルシートで直に指定するか、テーブルタグを使うかしないと、天地方向に中央にはできないんですよね。 今回はデータの構造を見ると、テーブルタグで書き直すのがdivタグよりも正しくデータ構造を表していると思うのでテーブルタグで書き直すのが望ましいと思いますよ。 どうしてもcssで再現したい場合はtable-cellなどの属性を使って、強制的にテーブルに変換するか、position:relative;を指定したブロックレベル要素を触って position:absolute;を使って、天地左右中央に置く方法がありますね。 http://bashalog.c-brains.jp/14/08/06-100100.php とりあえず、おすすめはテーブルタグです <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="ChooseSecondlyRole.css"> <script type="text/javascript" src="ChooseSecondlyRole.js"></script> <title>Choose Secondly Role</title> </head> <body> <table class="wrap"> <tr> <td class="cur_role"> <select id="l_select" name="l_select" size="25"> <option value='aa'>aa</option> <option value='admin'>admin</option> <option value='admin-gui'>admin-gui</option> <option value='webdavfs-admin'>webdavfs-admin</option> </select> </td> <td> <div class="button_area"> <div class="button_base"> <div> <input type="button" class="add_button" value="<<" onClick="onClickAdd()" /> </div> <div> <input type="button" class="remove_button" value=">>" onClick="onClickRemove()" /> </div> </div> </div> </td> <td> <div class="selectable_role"> <select id="r_select" name="r_select" size="25"> <option value='aa'>aa</option> <option value='admin'>admin</option> <option value='admin-gui'>admin-gui</option> <option value='bbb'>bbb</option> <option value='guest'>guest</option> <option value='role0101'>role0101</option> <option value='role0102-001'>role0102-001</option> <option value='role0103'>role0103</option> <option value='sdk-soft'>sdk-soft</option> <option value='webdavfs-admin'>webdavfs-admin</option> </select> </div> </td> </tr> </table> </body> </html>
お礼
そうですね。tableタグで作成する方法もありますね。配置の1つの方法として覚えておきます。
お礼
できたー！！ありがとうございます。もっと勉強しなければ。