フォームとその子を中央に置いて、テキスト入力の左上隅にラベルを貼り付けるにはどうすればよいですか？

Question

さて、私は正しく検索していないかもしれませんが、私はと正確にはを探しているようです。

div.some_form {} 
 

 
div.some_form>span { 
 
    font-weight: bold; 
 
    position: relative; 
 
    text-align: left; 
 
} 
 

 
div.some_form>form { 
 
    text-align: center; 
 
    font-size: 16px; 
 
    width: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
div.some_form>form>input.txtfield { 
 
    padding: 13px; 
 
    width: 25%; 
 
} 
 

 
.button { 
 
    background-color: #7AB55C; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 15px 32px; 
 
}

<div class="some_form"> 
 
    <form> 
 
    <span class="some_class">Some text</span> 
 
    <br> 
 
    <input type="text" class="txtfield" /> 
 
    <input type="button" class="button" value="Submit" onclick="doSomething()" /> 
 
    </form> 
 
</div>

が、私はそれはかなりある、（私が行うことができるよ）中心の入力を維持されて何をしたい：私はフォームを持っている 、のはこのような何か言わせてなぜすべてがdivにあるのか、私はtext-align：centerを使ってすべてを整列させましたが、最初の入力の左上隅にスパン要素を貼り付けてしまいました。 つまり、私はそれを得ることができますが、ウィンドウのサイズを変更すると、スパンが宇宙に飛び出します（つまり、テキストフィールドはスパンよりも低いレートで拡大します。これは、テキストがボタン添付されている）私はちょうどそれに固執するように見えることはできません。 （これは真剣に宿題ではなく、私はちょうどCSSになっていて、これは本当に気になります..）

何か助けが明らかに非常に高く評価されています！事前に 感謝:)ここ

Answer 1

を助けることができると思います。 <br />を削除します。クラスの指定が間違っています。 <span>はそこに直接の子供ではありません。だから、>は動作しません：

body { 
 
    text-align: center; 
 
} 
 
div.some_form span.some_class { 
 
    font-weight: bold; 
 
    position: relative; 
 
    text-align: left; 
 
    display: block; 
 
    padding: 0 4.5%; 
 
} 
 

 
div.some_form>form { 
 
    text-align: center; 
 
    font-size: 16px; 
 
    width: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
div.some_form>form>input.txtfield { 
 
    padding: 13px; 
 
    width: 45%; 
 
} 
 

 
.button { 
 
    background-color: #7AB55C; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 15px 32px; 
 
} 
 
div.some_form { 
 
    display: inline-block; 
 
}

<div class="some_form"> 
 
    <form> 
 
    <span class="some_class">Some text</span> 
 
    <input type="text" class="txtfield" /> 
 
    <input type="button" class="button" value="Submit" onclick="doSomething()" /> 
 
    </form> 
 
</div>

プレビュー

Answer 2

答えは、それはあなたのspanからdisplay: blockが動作する追加あなた

 .container{ 
 
\t \t \t width: 300px; 
 
\t \t \t height: 200px; 
 
\t \t \t position: absolute; 
 
\t \t \t left: 50%; 
 
\t \t \t top: 50%; 
 
\t \t \t margin-top: -100px; 
 
\t \t \t margin-left: -150px; 
 
\t \t } 
 
\t \t .txtfield { 
 
\t \t padding: 13px; 
 
\t \t width: 25%; 
 
\t \t } 
 

 
\t \t .button { 
 
\t \t background-color: #7AB55C; 
 
\t \t border: none; 
 
\t \t color: white; 
 
\t \t text-align: center; 
 
\t \t padding: 15px 32px; 
 
\t \t }

<div class="some_form"> 
 
\t <form> 
 
\t \t <div class="container"> 
 
\t \t  <span class="some_class">Some text</span> 
 
\t \t  <div class="input_container"> 
 
\t \t \t  <input type="text" class="txtfield" /> 
 
\t \t \t  <input type="submit" class="button" value="Submit" onclick="doSomething()" /> 
 
\t \t  </div> 
 
\t  </div> 
 
\t </form> 
 
\t </div>