I am having trouble centering a button in relation to the button above it. The image shows that the lower button is not properly centered.
I attempted to fix this issue by using the following CSS:
.btn {
padding: 16px 22px;
color: #fff;
border-radius: 4px;
position: relative;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-ms-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.15);
border: none;
text-transform: uppercase;
}
.btn-center {
display: flex;
align-items: center;
justify-content: center;
}
.btn-common {
background: #3498db;
}
.btn-xs {
border-radius: 0px;
font-size: 12px;
line-height: 1.5;
padding: 1px 5px;
}