Q&A
お返事が遅れて申し訳ありません．
試してみましたが，ボタン１だけが真ん中にきました．
最終的には電卓の様に１〜９のボタンを3×３の配置にしたいのですが，
どのようにすれば良いでしょうか？
以下のコードでcssで「 <div id="center”> 」の部分を
「 #center { text-align : center ; } 」のように中央にそろえるように指定したのですがうまく行きません．
いろいろ調べたのですが，よく分かりませんでした．初歩的な質問ですが，よろしくお願いします．
HTMLのソース
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="float.css"> <title>ボタン水平配置サンプル</title> </head> <body> <div id="center"></body> </html><div class="button"> <input type="submit" value="1" /> </div> <div class="button"> <input type="submit" value="2" /> </div> <div class="button"> <input type="submit" value="3" /> </div> </div>
cssのソース
#center { text-align : center ; }
.button {
float: left;
}
.buttonContainer {
overflow: hidden;
}
/* clearfix /
.buttonContainer:before,
.buttonContainer:after {
content: "";
display: table;
}
.buttonContainer:after {
clear: both;
}
/ For IE 6/7 (trigger hasLayout) */
.buttonContainer {
zoom: 1;
}
回答3件
0
クロームでF12押して、デベロッパーツール開きます。
対象のタグを選択して、ネットで調べた知識を元に、
stylesを修正して様子を見る。
投稿2015/09/12 12:43
総合スコア1124
0
ベストアンサー
<div class="button">を横並びにするためのfloat: left;されているので、<div class="button">の横幅は中にあるinputタグの幅になってしまっています。そして、その幅の中でのセンターになっているので、#centerのtext-align: centerが効いてないように見えています。
HTML構造を変えないのであれば、
.buttonのfloat指定を辞めてdisplayをinlineとかinline-blockにすれば良いかと思います。
css
1.button { 2 display: inline; /* または inline-block */ 3}
CSSの.buttonのfloat: left;は消してしまい
<div class="button">を<span class="button">のように別のタグにしてしまうのも一つの手です。
投稿2015/09/12 09:17
編集2015/09/12 09:19
総合スコア596
> ボタン１だけが真ん中にきました
chromeで確認しました。提示されていたコードを丸っと使用して修正を加えた所1,2,3が横並びになり、そのまま#center幅の中揃えになっていましたが、HTML・CSSなど何か変更されているのでしょうか？？？
確認ブラウザがIEの場合はそのバージョン含めて明記された方が良いかと思います。(往々にして表示が異なるので...)
> 最終的には電卓の様に１〜９のボタンを3×３の配置にしたい
方法としては、3x3のマスを作成してから、全体を中央に持ってくるようにした方が楽だと思います。3x3にする方法によっては先に中央揃えにした方法では全体を中央に持ってこれなくなったりしますので。
一番簡単なのは3つづつボタンを<div>などで囲ってあげることでしょう
<div class="row table-row">
<div class="button table-cell">1</div>
<div class="button table-cell">2</div>
<div class="button table-cell">3</div>
</div>
さらにCSSのtable-row, table-cellを使えばボタン幅も揃えやすくなるかと思います。
ex: CSS
.table-row {
display: table-row;
]
.table-cell {
display: table-cell
}
1つのコンテナに入れたいのであれば
コンテナの幅を指定して、中の各ボタン .buttonをfloatさせ、widthを33.333%とかコンテナ幅が固定であればコンテナ幅の1/3を指定すれば実現できるかと思います。
ex: CSS
#center {
margin: 0 auto;
width: 600px
}
.button {
float: left;
width: 33.333%; /* or (600 / 3)px */
}
0
次のようにしてみてください。
css
1#center { 2 margin-left:auto; 3 margin-right:auto; 4}
投稿2015/09/12 08:27
総合スコア1698
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。