How to center align buttons in a modal content? - html

Question

I have 6 buttons in my modal, I'm trying to make them center + vertical align in the page
<div class="modal fade" id="feedModal">
<div class="model-content row">
<div class="col-xs-12 col-sm-offset-2 col-sm-8 text-center">
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >1 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >2 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >3 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >4 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >5 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >6 oz </a>
</div>
</div>
</div>
CSS
.btn-amount {
background: #ffffff4f !important;
border: white 1px solid !important;
height: 50px;
vertical-align: middle !important;
margin-top: 30px;
width: 60%;
display: block;
}
.btn-amount:hover {
box-shadow: 0 5px 15px white;
}
Result

Answer 1

There are lots of ways to achive this, but as per my opinion use of flex is the one you should go with,
Give display:flex; to the parent in which your child element is to them you want to do the center.
justify-content is the property which will adjust items on X axes and in case of flex-direction: column; it will adjust the items on Y axes.
align-items is the property which will adjust items on Y axes and in case of flex-direction: column; it will adjust the items on X axes.
so if you want your child elements to make them center on both the axes, then use align-items:center and justify-content: center; on the parent, it will make your child elements center on both the axes as shown in your image,
.btn-amount {
background: #fff !important;
border: #fff 1px solid !important;
height: 50px;
vertical-align: middle !important;
margin-top: 30px;
width: 60%;
display: block;
}
.btn-amount:hover {
box-shadow: 0 5px 15px white;
}
.model-content {height: 300vh;//this is just for demo purpose}
.model-content > div {
width: 60%; height: 100%; margin: 0 auto;width: 60%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
body {background-color: #000;}
<div class="modal fade" id="feedModal">
<div class="model-content row">
<div class="col-xs-12 col-sm-offset-2 col-sm-8 text-center">
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >1 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >2 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >3 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >4 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >5 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >6 oz </a>
</div>
</div>
</div>

Answer 2

<div class="modal fade" id="feedModal">
<div class="model-content row">
<div class="col-xs-12 col-sm-offset-2 col-sm-8 text-center">
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >1 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >2 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >3 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >4 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >5 oz </a>
<a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >6 oz </a>
</div>
</div>
</div>
Sometimes a problem need a simple solution,try:
.btn-amount {
position: relative;
float: left;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 70px;
margin-bottom: 70px;
.btn-amount:first-of-type {
margin-top: 0;
}
.btn-amount:last-of-type {
margin-bottom: 0;
}
this solution will give all of your div margin so they won't stick each other.
& you can change the margin-top and margin-bottom style.