vertical align htmlフォーム

Question

私は、このテキストボックスを中央に配置し、垂直方向と水平方向の両方にページを送信することを考えていますが、次のコードは上の中央に配置します。これをページの中央に配置するにはどうすればよいですか？それは、垂直方向の設定を無視しているようなものです。

<div style="text-align:center; vertical-align:middle"> 
    <form action="save_thought.php" method="post"> 
     <input type="text" name="thought"><br> 
     <input type="submit" value="Submit"> 
    </form> 
</div> 

Answer 1

あなたが使用することができます。また、このために行くことができposition:absolute DEMO http://jsfiddle.net/kevinPHPkevin/U8dZr/

div#form-wrapper { 
    position:absolute; 
    top:50%; 
    right:0; 
    left:0; 
} 

Answer 2

あなたがこの記事を読んでも議論の最近のCSS垂直センタリングthechniques： http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Answer 3

：

HTML

<div id="main" > 
    <form id="frm" action="save_thought.php" method="post"> 
     <input type="text" name="thought"><br> 
     <input type="submit" value="Submit"> 
    </form> 
</div> 

CSS

#main 
{ 
    line-height: 400px; 
    text-align:center; 
    vertical-align:middle; 
} 

#frm 
{ 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 14px; 
} 

Demo Here

Answer 4

CSSは、おそらく私を驚かせるために停止することはありません。 Dhaval Marthakの答えを考えると、私は実際に、私が望んで右揃えのラベルを達成することができましたし、（当然のラベルの右側に）整列フィールドを左：

label { 
    display: block; 
    position:relative; 
    text-align: right; 
    width: 100px; 
    margin: 0 0 5px 0; 
} 
label > input, 
label > select, 
input { 
    position: absolute; 
    left: 120px; 
} 

JSfiddleはまだ私の残りの問題を指摘し、フィールドラベルがその行を分割する場合は、の下ののラベルに揃えられます。しかし、私はそれも改正することができると確信しています。

もちろん、ラベルとフィールドの間のスペースを、ラベルのサイズに基づいて（たとえば異なる言語で）より「動的に」割り当てることができればいいですが、これまでのところどこでも行われたことはありません。私は本当にそれが必要な場合、私はテーブルに頼らなければならないと思う。

Answer 5

divの内部にフォームを垂直方向と水平方向の両方に集中させたいと思っていた本物のプロジエクトのために、上記の解決策はありませんでしたが、display: flex;プロパティを使用しました。親divをflexと表示してから、子供の場合はmargin: auto;のプロパティformを使用してください。

HTMLコード：

<div id="centeringDiv" style="display: flex;"> 
    <form id="mainForm" action="save_thought.php" method="post"> 
     <input type="text" name="thought"><br> 
     <input type="submit" value="Submit"> 
    </form> 
</div> 

CSSコード：あなたがいることを見ることができます

html, body{ 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 

#centeringDiv{ 
    height: 100%; 
    width: 100%; 
    display: flex; 
} 

#mainForm{ 
    margin: auto; 
} 

JSFiddleする、あなたのケースで

、それはこのようになりますフォームは、ページ全体で縦と横の両方にセンタリングされています。