ボタンを中央寄せする方法

2023/09/06 02:30

このQ&Aのポイント

画面を<div>で左側、中央、右側と3分割し、中央に配置するボタンの水平方向と垂直方向を中央にする方法について教えてください。
質問者は、「＞＞」ボタンと「＜＜」ボタンを水平方向で中央、垂直方向で中央に配置したいと考えています。
現在のHTMLおよびCSSについても提供されています。

ベストアンサー

ボタンを中央寄せするには？

2015/06/28 20:49

画面を<div>で左側、中央、右側と3分割して左側には選択済み機能一覧、右側には選択可能な機能一覧を持ちます。中央divには「＞＞」ボタンと「＜＜」ボタンを配置して右側の選択可能一覧から選択または解除を出来るようにしています。やりたい事は、「＞＞」ボタンと「＜＜」ボタンを水平方向で中央、垂直方向で中央に配置したいのですが、添付画像の通り水平方向は中央なのですが垂直方向が下側に配置されてしまいます。水平方向で中央かつ垂直方向で中央に配置するにはどのようなhtml,cssにすれば良いでしょうか？ css,html抜粋を示します。アドバイスお願いします。 div.l_list,div.r_list { display: inline-block; width:30%; height:70% ; } div.button_area { display: inline-block; text-align: center; vertical-align: center; width:30%; height:100% ; } select { width:100%; height:100% } <!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> <div class="wrap"> <div 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> </div> <div class="button_area"> <div class="button_base"> <div> <input type="button" class="add_button" value="&lt&lt" onClick="onClickAdd()" /> </div> <div> <input type="button" class="remove_button" value="&gt&gt" onClick="onClickRemove()" /> </div> </div> </div> <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> </div> </body> </html>

miiom1018
お礼率35% (21/59)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

DrFell
ベストアンサー率55% (305/551)

2015/06/29 20:38 回答No.2

.wrap{ display:table; } .wrap>div{ display:table-cell; vertical-align:middle; } を div.button_area の記述より後ろに加えてみてください。

質問者

お礼 2015/07/05 01:06

できたー！！ありがとうございます。もっと勉強しなければ。

その他の回答 (1)

m_matsubara
ベストアンサー率48% (80/166)

2015/06/29 11:42 回答No.1

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="&lt&lt" onClick="onClickAdd()" /> </div> <div> <input type="button" class="remove_button" value="&gt&gt" 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>

質問者

お礼 2015/07/05 01:09

そうですね。tableタグで作成する方法もありますね。配置の1つの方法として覚えておきます。

関連するQ&A

複数のボタンを等間隔に、かつ中央に配置する
ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、さらにその3つがちょうどページの中央に表示されるようにしたいです。 cssをどのように記述すればいいですか？ ↓下記のようなイメージにしたいです。 -------------------- -------------------- 　　　　□　□　□　　←これがボタンです ↓htmlファイルです↓ <div class="button"> <input type="submit" value="＜＜戻る＜＜" /> </div> <div class="button"> <input type="submit" value="選択リセット" /> </div> <div class="button"> <input type="submit" value="＞＞進む＞＞" /> </div> ↓CSSファイルです↓ div.button { padding-right:35px; float:left; } 上記設定で、ボタンの左右間隔はいい感じにあいたのですが全体的に左に寄ってしまってます。よろしくお願いいたします。
- ベストアンサー
- HTML
セレクトボックスの内容を中央寄せ
IE系ブラウザで表示する場合ですが、セレクトボックスの内容を中央寄せしたいのですが、どうしたらよいでしょうか。直接HTMLに書くよりも、スタイルシートでの指定にしたいと思っています。それができなければ、HTMLに書いてもよいです。よろしくおねがいします。 select.html --------------------------------------------------- <select name="selectmenu" class="selectbox"> <option value="param1">ここの文字を中央寄せ</option> <option value="param2">ここの文字が中央寄せ</option> <option value="param3">ここの文字が中央寄せ</option> <option value="param4">ここの文字が中央寄せ</option> </select> ---------------------------------------------------- style.css ---------------------------------------------------- .selectbox{ ここで中央寄せを指定 } ----------------------------------------------------
- 締切済み
- HTML
コマンドボタンを中央に表示したい
<html> <head> <title>test</title> <style type="text/css">  </style> </head> <body> <div class="div_center"> <button type="button" onclick="window.open('http://www.google.co.jp/','_blank');">google</button> </div> </body> </html> なぜこのコードではコマンドボタンは中央に表示されないのでしょうか？ margin-left: auto; margin-right: auto; これは違いますか？
- ベストアンサー
- CSS
中央に配置
CSSで下記の各タグのwidthはパーセントで設定してテキストボックス、ボタン、リンクを中央に配置したいのですがどうしたらいいのでしょうか。 <form id="form1" action="" method="post" name="form1"> <div id="topCouponSearch"> <span class="topCouponSearcha"> <input id="address" class="topCouponSearcha2" type="text" value="（例）住所・駅名・郵便番号・ランドマークを入力" name="address" style="color: #999999;"> <button id="getad">検索</button> <span class="topCouponSearcha3"> <a href="?act=u05">店舗一覧</a> </span> </span> </div> </form>
- 締切済み
- CSS
JAVASCRIPTで、ボタンを押したら　入力項目を追加できるようにしたい。
FORMタグ内に下記のようなの入力項目があります。 JAVASCRIPTを使って、追加ボタンを押したときに、下記の部分を2個、3個と追加させたいと思っております。 (最初から複数個分の入寮力フォームを用意しておくと、見た目が良くないため、追加ボタンで随時追加するようにしたい）どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。どうぞよろしくお願い致します。 <select> <option value="　" selected="selected">選んでください</option> <option value="テスト1">テスト1</option> <option value="テスト2">テスト2</option> <option value="テスト3">テスト3</option> </select> <br class="spacer"> </div> <div class="forms"> <label>テーブル1</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル2</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル3</label> <input type="text" name="textfield" id="textfield" class="short" /> <div class="btns"> <input type="button" value="送信" /> <input type="button" value="さらに入力項目を追加する" /> <input type="button" value="クリア" /> </div>
- ベストアンサー
- JavaScript
動的なセレクトボックスの生成と削除
CGI（Perl）で、Javascriptを用いWEBアプリケーションを作成しています。その過程で、追加ボタンを押すとセレクトボックス（５つでひとかたまりです）が増えるJavascriptを作成しています。しかし、残念ながら削除をする機能をどうしていいか思いつきませんのでお知恵を貸してください。（また、増加ボタンも他にいい方があレバよろしくお願いします。）今までに作成したのは以下のとおりです。 **********Javascript*********** var copy; function addInput() { copy = document.getElementById('plus') copy.innerHTML="Filter:          <select name='condition'> <option value='and'>AND</option> <option value='or'>OR</option> </select>  <select onchange='SetSubMenu(value);'> <option value='Werkstoff'>1.Werkstoff</option> <option value='Shiftfaktor'>2.Shiftfaktor </option> <option value='SurfCorr'>3.SurfCorr</option> </select>  <select name='condition'> <option value='like'>like</option> <option value='notlike'>not like</option> <option value='equal'>=</option> <option value='<'><</option> <option value='>'>></option> <option value='<='><=</option> <option value='>='>>=</option> </select>  <div id ='Werkstoff' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGWERK> <option value='<TMPL_VAR NAME=WERKSTOFF>'><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP></select></div> <div id ='Getriebe' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGETRIEBE> <option value='<TMPL_VAR NAME=GETRIEBE>'><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP></select></div>   <input type='button' onclick='addInput()' value='+'>  <input type='button' onclick='delInput()' value='-'> <div id='plus'></div>" } </script> **********stylesheet************* <style type="text/css"></style> <table> <tr> <td>Datenbank:</td> <td colspan="5"> <select name="datenbank"> <option value="bank1">DATEN BANK 1</option> </select> </td> </tr> <tr> <td>Filter:</td> <td> <select name="condition"> <option value="and">AND</option><option value="or">OR</option> </select> </td> <td> <select onchange="SetSubMenu(value);"> <option value="Werkstoff">1.Werkstoff</option> <option value="Shiftfaktor">2.Shiftfaktor </option> <option value="SurfCorr">3.SurfCorr</option> </select> </td> <td> <select name="condition"> <option value="like">like</option> <option value="notlike">not like</option> <option value="equal">=</option> <option value="<"><</option> <option value=">">></option> <option value="<="><=</option> <option value=">=">>=</option> </select> </td> <td> <div id ="Werkstoff" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGWERK><option value="<TMPL_VAR NAME=WERKSTOFF>"><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP> </select> </div> <div id ="Getriebe" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGETRIEBE><option value="<TMPL_VAR NAME=GETRIEBE>"><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP> </select> </div> </td> <td> <input type="button" onclick="addInput()" value="+"> <input type="button" onclick="delInput()" value="-"> </td> </tr> <tr> <td colspan='6'><div id="plus"></div></td> </tr> </table> よろしくお願いします。
- ベストアンサー
- JavaScript
IEでCSSの中央寄せが効かない
common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。どのようにしたら良いでしょうか？
- ベストアンサー
- HTML
CSSスプライトの中央寄せ　（CSS）
どうか力をお貸しください…。 dreamweaverでホームページを作成しています。 640pxの幅を指定した<div>の background-img に、CSSスプライトの中の幅600pxの画像を配置し、background-positionで、0 -100px; のように場所を指定しました。その幅600pxの画像を640pxの<div>の中で中央寄せで配置したいのですが、どのようにすればいいでしょうか？ padding:20px；は使うことができません。ご存知の方がいたらよろしくお願いします。
- 締切済み
- CSS
一致する文字を見つけ、それのみ表示させる方法
javascriptを使って<body>内の<div>に含まれる文字と一致するものを絞り込み、残りは非表示にする方法を教えてください。ドロップダウンで文字を選びOKボタンを押すとあ　の場合は<div>内の「あ」が１つなので１つだけ表示されい　は２つあるので２つ表示されう　は３つ、というように idやclassをつけて判断させるのではなく、中身の文字のみを判断できるようにしたいです。 <html> <head> <title></title> <script type="text/javascript"> </script> </head> <body> <form> <select> <option value="">あ</option> <option value="">い</option> <option value="">う</option> </select> <input type="button" value="OK" onclick=""> </form> <div>あ</div> <div>い</div> <div>う</div> <div>い</div> <div>う</div> <div>う</div> </body> </html>
- ベストアンサー
- JavaScript
引数でDOMのエレメントを指定したいのですが。
javascriptが苦手な者で質問内容にさえ自身が無い質問です。スケジュールを管理するフォームを作りたく、以下のようなものを書いてトライしています。 ----------------------------------- javascript部 ----------------------------------- function clear_select(day){ 　　elem = "select_hour_" + day; 　　document.form_name.elem.selectedIndex = "--"; } ----------------------------------- htmlのform部 ----------------------------------- <input id="Bot_Sch_20111001" name="Bot_Sch_20111001" type="button" onClick="clear_select('20111001')" > <select id="select_hour_20111001" name="select_hour_20111001"> <option value="--">--</option> <option value="01">1</option> <option value="02">2</option> ↓ <option value="24">24</option> </select> <input id="Bot_Sch_20111002" name="Bot_Sch_20111002" type="button" onClick="clear_select('20111002')" > <select id="select_hour_20111002" name="select_hour_20111002"> <option value="--">--</option> <option value="01">1</option> <option value="02">2</option> ↓ <option value="24">24</option> </select> 以下30日程セレクターが続きます。 ----------------------------------- 上記関数clear_selectの引数でフォームのエレメントを規定し、そのセレクターの値を書き換える事はできるのでしょうか？可能ならどのような書き方をすべきなのかご教授いただけるとありがたいです。
- ベストアンサー
- JavaScript

ボタンを中央寄せする方法

ボタンを中央寄せするには？