javascript - DIV内のオブジェクトを水平方向に中央に配置

Question

ボタンをdiv内で水平方向に中央に配置しようとしていますが、運がありません。

var x = document.createElement("div"); // the div container
x.style.backgroundColor = "red";
x.style.width = "200px";
x.style.height = "200px";   
document.body.appendChild(x);

var y = document.createElement("input"); // the button to be centered inside div "x"
y.type = "button";
y.value = "test button";
y.style.marginLeft = "auto";
y.style.marginRight = "auto";
x.appendChild(y);

やってみましたy.style.textAlign = "center"、"y.style.margin = "auto 0"。私は何が間違っているのですか？

http://jsfiddle.net/5tffD/1/

Answer 1

これを行う：

x.style.textAlign = 'center';

ライブデモ: http://jsfiddle.net/5tffD/3/

要素を個別に位置合わせすることはできません。text-alignテキスト行を保持する要素 (この場合は DIV 要素) にプロパティを設定することによってのみ、テキスト行全体を揃えることができます。

これが、要素を個別に整列できるようにするvertical-alignプロパティとどのように異なるかに注意してください。

Answer 2

センタリングのいくつかの方法を次に示します。

1) div 内のすべて:

<div align="center"> text or smth </div>

2）テキストの場合（おそらく画像も）：

<center> text </center>

3) フレームまたは画像用

<img style="display:block;margin-left:auto;margin-right:auto;" align="center" src="imageee.jpg" />

4) 正しく配置するだけです:

<div style="width:80%;margin-left:10%;"> content </div>