Text align center buttons - html

Question

I need to center buttons in the middle of page, one under another.
I've used code below, but the result was that buttons still appear next to each other.
header {
text-align: center;
.btn {
#include Myriad-Pro-Light;
border-radius: 7px;
padding: 5px 10px;
border: none;
}
.btn-green {
color: #fff;
background: #7CAE9E;
margin: 20px;
}
.btn-grey {
color: #333;
background: $grey;
margin: 20px;
}
}
<header>
Button A
Button B
</header>
Thank you

Answer 1

you can use "flexbox" for this
header {
display: flex;
flex-direction: column;
align-items: center;
.btn {
#include Myriad-Pro-Light;
border-radius: 7px;
padding: 5px 10px;
border: none;
}
.btn-green {
color: #fff;
background: #7CAE9E;
margin: 20px;
}
.btn-grey {
color: #333;
background: $grey;
margin: 20px;
}
}
<header>
a
b
</header>
Without flexbox
.btn {
#include Myriad-Pro-Light;
border-radius: 7px;
padding: 5px 10px;
border: none;
float: left;
clear: both;
width: calc(100% - 40px);
box-sizing: border-box;
text-align: center;
}
.btn-green {
color: #fff;
background: #7CAE9E;
margin: 20px;
}
.btn-grey {
color: #333;
background: $grey;
margin: 20px;
}
<header>
a
b
</header>

Answer 2

Update check new fiddle
https://jsfiddle.net/bimbonkens/fa7s3ypj/
you needed only the
display:block
on your buttons.
also your css syntax is wrong for vanilla css(no preprocessors)
header {
.btn {}
}
should be this
header { }
.btn { }
and if you need context:
header {}
header .btn {}
You need to use
margin: 0 auto;
for block elements, because
text-align:center;
works only on inline and inline-block

Answer 3

one way to go could be the following:
header {
text-align: center;
}
header .btn {
border-radius: 7px;
padding: 5px 10px;
border: none;
display: block;
width: 100px;
margin: auto;
}
.btn-green {
color: #fff;
background-color: #7CAE9E;
margin: 20px;
}
.btn-grey {
color: #333;
background-color: grey;
margin: 20px;
}
<header>
Button A
Button B
</header>

Answer 4

Do you want something like this:-
header {
text-align: center;
.btn {
#include Myriad-Pro-Light;
border-radius: 7px;
padding: 5px 10px;
border: none;
}
.btn-green {
color: #fff;
background: #7CAE9E;
margin: 20px;
}
.btn-grey {
color: #333;
background: $grey;
margin: 20px;
}
}
<header>
Button A<br>
Button B
</header>