CODEWITHSUNDEEP
htmlcssbutton
Patryk Dąbrowski
Patryk Dąbrowski

Reputation: 177

How to make two buttons in column?

How can I make two buttons in a column and center? I tried with flexbox, but when I add flex-direction:column it makes buttons to width 100% I need like this enter image description here

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;
}

Upvotes: 1

Views: 14563

Answers (2)

TomaszGuzialek
TomaszGuzialek

Reputation: 871

Try putting the buttons in an additional DIV and apply these styles: 

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

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

Upvotes: 0

jl_
jl_

Reputation: 5539

One way to do this is by specifying the width to the button and centering it by margin: 0 auto. 

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

Sample snippet to work with: 

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>

Upvotes: 2

Related Questions