ラベルと入力の両方をページの中心に置く

Question

margin: 0 autoを使用して入力ボックスをフォームの中央に配置しようとしましたが、機能しました。問題は、入力ボックスがブロックレベルの要素だったため、入力ボックスとラベルが整列していないことです。彼らは、改行のように、他のものの上にあった。

だから、それぞれのラベルと入力ボックスをdiv内に折り返すことができたと思っていました。以前と同じことをしています：margin: 0 auto。残念なことに、入力とラベルのどちらも現在中央に配置しません。

CSSコード：

div.center{ 
 
\t margin: 0 auto; 
 
\t display:block 
 
}

あなたたちは私を助けることができれば、それは素晴らしいことです。もし必要があれば私は完全なHTMLコードとCSSコードを提供することもできます。

Answer 1

div.center { 
 
    display: inline-block; 
 
    border: solid; 
 
} 
 
form { 
 
    border: solid; 
 
    text-align: center 
 
}

<form> 
 
    <div class="center">Label</div> 
 
    <input type="text"> 
 
</form>

Answer 2

あなたはdivの中に2つの入力を持っている場合は、このコードを追加することができます：あなたは私はあなたのためにそれをカスタマイズすることができ、あなたの完全なコードを提供することができれば

.container { 
     width: 50vw; 
     display: flex; 
     justify-content: space-between; 
    } 

を。