1

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

enter image description here

code-8
  • 54,650
  • 106
  • 352
  • 604
  • 1
    Does this answer your question? [How to center an element horizontally and vertically](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) – s.kuznetsov Apr 29 '21 at 12:45

2 Answers2

1

There are lots of ways to achive this, but as per my opinion use of flex is the one you should go with,

  1. Give display:flex; to the parent in which your child element is to them you want to do the center.

  2. 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.

  3. 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.

  4. 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>
Atul Rajput
  • 4,073
  • 2
  • 12
  • 24
  • I used bootstrap grid because I’m only familiar with that right now. – code-8 Apr 29 '21 at 13:12
  • 1
    if you used bootstrap, and I hope that you have used version 4 or above, then use these classes on your parent div, 1. d-flex ,2nd: flex-column, 3rd: justify-content-center and 4th : align-items-center it will do the exact same thing which I did with code. – Atul Rajput Apr 29 '21 at 13:18
  • yes its free and better in every term, but if dont want to change the bootstrap version , then use the css I have given in above example, that will work with BS3 as well because thats just pure css – Atul Rajput Apr 29 '21 at 13:34
  • Why need `height: 300vh;` ? – code-8 Apr 29 '21 at 14:47
  • I have mentioned there read comment after height property, that its just for demo purpose my friend, no need of that in your code, here we dont have that much height and to show your buttons in center, you can ignore it completely – Atul Rajput Apr 29 '21 at 14:53
1

<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.

Lorenzo028
  • 17
  • 1
  • 4