列に2つのボタンを作成する方法は？

Question

列と中央に2つのボタンを作成するにはどうすればよいですか？ 私はフレキシボックスでみましたが、私はflex-direction:columnを追加するとき、それはボタンが100％ 幅になり、私はこの

HTML

<form> 
    <button type="button">Regulamin</button> 
    <button type="button">Formularz kontaktowy</button> 
</form> 

これを行うためのCSS

form { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    padding-top: 20px; 
} 

Answer 1

一つの方法と同様に必要ボタンにwidthを指定し、margin: 0 autoでセンタリングすることです。

form button { 
    width: 100px; 
    margin: 0 auto; 
} 

で動作するようにサンプルスニペット：

form { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    padding-top: 20px; 
 
} 
 
form button { 
 
    width: 100px; 
 
    margin: 0 auto; 
 
}

<form> 
 
    <button type="button">Regulamin</button> 
 
    <button type="button">Formularz kontaktowy</button> 
 
</form>

Answer 2

追加DIVのボタンを入れて試してみて、これらのスタイルを適用します。

form { 
    background-color: green; 
    display: flex; 
    align-items: center; 
    flex-direction: column; 
    padding-top: 20px; 
} 

form div button { 
    display: block; 
    width: 100%; 
}