位置を正しく設定する方法

私は入力ページを企画していますが、私は自分の「ボタン」の位置をどのように設定するのか分かりません。ここで位置を正しく設定する方法

は、私がポジションを持っているだろうかの例です：

Click here

誰も私を助けることができますか？

出典

2016-05-30 Kavkus

[jsfiddle]（https://jsfiddle.net/） –

を作成してください、私はそれを解決する方法のいずれかのアイデアを得ました。だから私は今までjsfiddleを持っていませんでした。 – Kavkus

私は、jsfiddleにあなたのページのHTML構造とあなたが試したCSSを含めるべきだということを意味しました（実際の例ではありません）。これを解決するには多くの方法があります。 –

文書の中央に位置する正方形のdivを、確認します。その後、絶対配置を使用してdivの隅にボタンを固定します。私はdidntの

.container { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    top: calc(50% - 100px); 
 
    left: calc(50% - 100px); 
 
} 
 

 
.container > input { position: absolute; } 
 

 
.container > input:first-child { 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.container > input:nth-child(2) { 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
.container > input:nth-child(3) { 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
.container > input:last-child { 
 
    bottom: 0; 
 
    right: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <div class="container"> 
 
    <input type="button" value="Button1"> 
 
    <input type="button" value="Button2"> 
 
    <input type="button" value="Button3"> 
 
    <input type="button" value="Button4"> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-05-30 06:42:01 Noah

これはかなり良い作品です。今、私は2つのコンテナを持っており、このようなものの1つにのみボタンを集中させたいのです http://i.stack.imgur.com/dblMi.png – Kavkus

どのようなブラウザサポートが必要ですか？あなたがIE 9を気にしないで、フレックスボックスが完璧になるならば。 – Noah

私はjsfiddleで4つのボタンを作った。

text-align:center;

それをしてください参照してください。https://jsfiddle.net/wLqfv0cx/5/

出典

2016-05-30 06:36:48 aghilpro

位置を正しく設定する方法

答えて

関連する問題