Centering the text vertically in cylinder shaped div with respect to its content

Question

am trying to place the text vertically center, But it is not staying in center with respect to its content is is changing, help me in this

 //note parseInt //note stop var person = ['Mom is cooking','Mom is cooking','Friend','Teacher']; var situation = ['Driving','Walking','chatting','Watching bahubali movie']; var clicks = true; var spinCount = 0; var lifeCount = 4; function go(){ addpersonSlots($("#slots_a .wrapper")); moveSlots($("#slots_a .wrapper"),'a'); addSituationSlots($("#slots_b .wrapper")); moveSlots($("#slots_b .wrapper")); } $(document).ready( function(){ addpersonSlots($("#slots_a .wrapper")); addSituationSlots($("#slots_b .wrapper")); } ); function addpersonSlots(jqo){ for(var i = 0; i < 15; i++){ var ctr = Math.floor(Math.random()*person.length); jqo.append("<div class='slot' id="+i+">"+person[ctr]+"</div>"); } } function addSituationSlots(jqo){ for(var i = 0; i < 15; i++){ var ctr = Math.floor(Math.random()*situation.length); jqo.append("<div class='slot' id="+i+">"+situation[ctr]+"</div>"); } } function moveSlots(jqo){ var time = 1000; time += Math.round(Math.random()*1000); jqo.stop(true,true); var marginTop = parseInt(jqo.css("margin-top"), 10) marginTop -= (7 * 100) jqo.animate( {"margin-top":marginTop+"px"}, {'duration' : time, 'easing' : "linear"}).promise().done(function () { // alert($("div.slot").not(":hidden").prop("id")); }); } 

 .first-step-div{ background:#dddddd; margin:0 auto; text-align:center; padding:80px 0px; position:relative; } #back_link{ position: absolute; left: 34px; bottom: 28px; } .problem-count{ height:45px; width:50px; border-radius:10px; margin-bottom:10px; background:#e7e8e9; } .problem-count span{ position: relative; top: 4px; font-size:25px; font-weight:700; } .label-text{ font-size:20px; color:#444; font-weight:600; } .earned-dibbs{ font-size:40px; font-weight:600; } .problem-count.active{ height:50px; width:50px; border-radius:10px; margin-bottom:10px; background:#fff !important; } .sticky-notes{ padding:30px; } .round-1{ background:#fff; margin:0 auto; text-align:center; border-radius:15px; width:320px; padding:50px 0px; } .problem-text{ background: #fff; border-radius: 10px; overflow: auto; width: 376px; font-size: 16px; text-align: left; padding: 15px; color:#58585a; min-height: 172px; max-height:172px; } .problem-user-icon{ height:25px; width:25px; background:#18b1a0; margin-bottom:10px; } .round-label{ font-size:30px; color:#f05f9d; font-weight:700; } .round-label-text{ font-size:24px; color:#18b1a0; cursor:pointer; } .count-knowls div{ display:inline; } .knowls-num, .dibbs-num{ font-size:25px; font-weight:700; } .spin-title{ font-size:20px; padding:8px 15px; text-align:center; background:#ddd; border-radius:10px; font-weight:700; width:268px; position: relative; top: 8px; } .title-border{ border:5px dotted #999; } .page-header{ margin:0px; } #rcorners_parent { position: relative; background: #ddd; padding: 20px; border-radius: 15px 50px 50px 15px / 8% 80% 80% 8%; overflow: hidden; padding: 42px 0px 32px 0px; } #rcorners_parent::after { content: ""; position: absolute; top: 10%; left: -15px; width: 25px; height: 80%; background-color: #bdbec0; border-radius: 100%; } #slots_a { position: relative; background: #fff; padding: 20px; width: 170px; height: 100px; border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%; overflow: hidden; display:inline-block; margin-right:15px; } #slots_a::after { content: ""; position: absolute; top: 10%; left: -15px; width: 25px; height: 80%; background-color: #109582; border-radius: 100%; display:inline-block; margin-right:15px; } #slots_b { position: relative; background: #fff; padding: 20px; width: 225px; height: 100px; border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%; overflow: hidden; display:inline-block; margin-right:15px; } #slots_b::after { content: ""; position: absolute; top: 10%; left: -15px; width: 25px; height: 80%; background-color: #109582; border-radius: 100%; display:inline-block; margin-right:15px; } #slots_c { position: relative; background: #18b1a0; padding: 20px; width: 225px; height: 100px; border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%; overflow: hidden; display:inline-block; } #slots_c::after { content: ""; position: absolute; top: 10%; left: -15px; width: 25px; height: 80%; background-color: #109582; border-radius: 100%; display:inline-block; } .slot { font-size:32px; } .slots .wrapper{ margin-top:6px; width:100px; } .slots .slot{ width:100px; height:117px; text-align:center; } .spin-person{ font-size:16px; } .nob-img{ position: absolute; top: 18px; right: -26px; } .spin{ background:#18b1a0 !important; border:1px solid #18b1a0 !important; color:#fff !important; font-weight:600 !important; } .spin:hover{ background:#18b1a0 !important; border:1px solid #18b1a0 !important; color:#fff !important; font-weight:600 !important; } .spin-button{ padding:10px 34px; border-radius:14px; font-weight:600; font-size:20px; } .pink{ background:#f05f9d; border:1px solid #f05f9d; color:#fff; font-weight:600; } .pink:hover{ background:#f05f9d; border:1px solid #f05f9d; color:#fff; font-weight:600; } .pink-button{ padding: 10px 11px; border-radius: 14px; font-weight: 600; font-size: 16px; } .step-one, .step-two{ background:#e1e65d !important; border-radius:25px; font-size:20px; color:#fff; border-color:#e1e65d !important; font-weight:600; padding:10px 15px; cursor:pointer; } .step-three{ background:#f05e9d !important; border-radius:25px; font-size:20px; color:#fff; border-color:#f05e9d !important; font-weight:600; padding:10px 15px; cursor:pointer; } .step-four{ background:#54cbec !important; border-radius:25px; font-size:20px; color:#fff; border-color:#54cbec !important; font-weight:600; padding:10px 15px; cursor:pointer; } .glyphicon-triangle-bottom{ position:relative; top:4px; } .gif-title{ color:#f074a9; font-size:18px; font-weight:600; text-align:center; margin-top:10px; } .col-centered{ float: none; margin: 0 auto; } .gif-box{ text-decoration:none; cursor:pointer; } .gif-box:hover{ text-decoration:none; cursor:pointer; } .orange-button{ padding:10px 34px; border-radius:14px; font-weight:600; font-size:20px; } .btn-container{ margin:18px 0px; } .draw-steps{ border:2px dashed #666; border-radius:10px; margin-bottom:30px; } .step-num{ color:#666; font-size:50px; font-weight:600; position:relative; top:10px; } .idea-steps-label{ font-size:18px; text-align:left; } .draw-title{ color:#54cbec; font-size:20px; text-align:left; font-weight:600; margin-bottom:10px; } a:hover{ text-decoration:none !important; } .btn.grey { background: grey none repeat scroll 0 0; border-color: grey; color: #fff; cursor:not-allowed !important; pointer-events:auto !important; } .glyphicon-circle-arrow-left{ left: -10px; } #back_link .glyphicon{ font-size:48px !important; color:#818285 !important; } #back_link .glyphicon:hover{ color:#2abbb5 !important; } @media screen and (max-width: 600px){ #back_link { position:absolute; bottom:5px; left:5px; } #back_link .glyphicon{ font-size:35px !important; } .step-one, .step-two, .step-three, .step-four{ font-size:18px; } } .sticky { margin: 0; padding: 8px 10px; width:205px; height:200px; font-size: 1.4em; border:1px #E8Ds47 solid; background:#f2f4ce; box-shadow: 3px 3px 5px #666; -moz-box-shadow: 3px 3px 5px #666; -webkit-box-shadow: 3px 3px 5px #666; } .sticky p { text-align: center; } .sticky textarea { width:184px; height:180px; background:#f2f4ce; border-bottom:none !important; } .sticky ol { margin: 12px; } .r-index{ z-index: 0; } .a-index{ z-index: 99; } .sticky-container { position: relative; } .sticky { position: absolute; } /*time container*/ button[data-setter] { outline: none; background: transparent; border: none; font-family: 'Roboto'; font-weight: 300; font-size: 18px; width: 25px; height: 30px; color: #F7958E; cursor: pointer; } button[data-setter]:hover { opacity: 0.5; } .time-container { position: relative; top: 130px; width: 300px; margin: 0 auto; text-align: center; } .setters { position: absolute; left: 85px; top: 75px; } .minutes-set { float: left; margin-right: 28px; } .seconds-set { float: right; } .controlls { position: absolute; left: 37%; top: 52px; text-align: center; } .display-remain-time { font-weight: 700; font-size: 32px; color: #fff; } #pause { outline: none; background: transparent; border: none; margin-top: 10px; width: 50px; height: 50px; position: relative; } .play::before { display: block; content: ""; position: absolute; top: 8px; left: 16px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 22px solid #F7958E; } .pause::after { content: ""; position: absolute; top: 8px; left: 12px; width: 15px; height: 30px; background-color: transparent; border-radius: 1px; border: 5px solid #F7958E; border-top: none; border-bottom: none; } #pause:hover { opacity: 0.8; } .ec-base { fill: none; stroke: #fff; stroke-width: 4px } .ec-progress { fill: none; stroke: #18b1a0; stroke-width: 10px; transition: stroke-dashoffset 0.7s; -webkit-transition: stroke-dashoffset 0.7s; } .ec-pointer { fill: #FFF; stroke: #F7958E; stroke-width: 2px; } #e-pointer { transition: transform 0.7s; -webkit-transition: -webkit-transform: 0.7s; } .sticky-note-div{ background:#f2f4ce; box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; height:215px; width:22%; display:inline-block; margin-right:2%; margin-bottom:10px; position:relative; cursor:pointer; } .sticky-note-div img{ position: absolute; right: 5px; top: 5px; } .sticky-note-div:last-child{ margin-right:0px; } @media only screen and (max-width: 768px) { .nob-img { position: absolute; top: 41px; right: -26px; } #slots_a { width:160px; margin-right:15px; } #slots_b { width:205px; margin-right:15px; } #slots_c { width:205px; margin-right:0px; } .time-container { position: relative; top: 35px; } } @media only screen and (max-width: 540px) { .nob-img { position: absolute; top: 262px; right: -22px; } #slots_a, #slots_b, #slots_c { width:210px; margin-right:0px; margin-bottom:10px; } .problem-text{ visibility:hidden; } } .card{ background:#fff; margin-bottom:40px; } .card .tab-content{ max-width:100% !important; font-size:18px !important; min-height: 300px; max-height:514px; overflow: auto; } .card .nav-tabs { border-bottom: 2px solid #DDD; } .card .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; } .card .nav-tabs > li > a { border: none; color: #ffffff;background: #58585a; font-size:16px;font-weight:600;} .card .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #58585a !important; background: #fff; } .card .nav-tabs > li > a::after { content: ""; background: #58585a; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; -webkit-transition: all 250ms ease 0s; transform: scale(0);-webkit-transform: scale(0); } .card .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1);-webkit-transform: scale(1); } .card .tab-nav > li > a::after { background: #58585a none repeat scroll 0% 0%; color: #fff; } .card .tab-pane { padding: 15px 0; } .card .tab-content{padding:20px} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="position:relative;"> <div id="rcorners_parent"> <div class="slots" id="slots_a"> <div class="wrapper" ></div> </div> <div class="slots" id="slots_b"> <div class="wrapper" ></div> </div> <div id="spin_btn_div"> <div class="btn-container" style="margin-bottom:0px;"> <button id="proceed_btn" style="display:none;font-size:20px;" class="btn pink pink-button shooter-btn" onClick="go();">Proceed</button> <button id="spin_btn" style="margin-left:10px;margin-right:10px;" class="btn spin spin-button shooter-btn" onClick="go();">Spin</button> </div> </div></div> </div> 

Answer 1

I managed to get the desired result. See snippet below

Code added .slot { display:flex;align-items:center;justify-content:center;}

Removed margin-top:6px from .slots .wrapper

Changed padding:20px to padding:0 20px on .slots_a and .slots_b

 //note parseInt //note stop var person = ['Mom is cooking','Mom is cooking','Friend','Teacher']; var situation = ['Driving','Walking','chatting','Watching bahubali movie']; var clicks = true; var spinCount = 0; var lifeCount = 4; function go(){ addpersonSlots($("#slots_a .wrapper")); moveSlots($("#slots_a .wrapper"),'a'); addSituationSlots($("#slots_b .wrapper")); moveSlots($("#slots_b .wrapper")); } $(document).ready( function(){ addpersonSlots($("#slots_a .wrapper")); addSituationSlots($("#slots_b .wrapper")); } ); function addpersonSlots(jqo){ for(var i = 0; i < 15; i++){ var ctr = Math.floor(Math.random()*person.length); jqo.append("<div class='slot' id="+i+">"+person[ctr]+"</div>"); } } function addSituationSlots(jqo){ for(var i = 0; i < 15; i++){ var ctr = Math.floor(Math.random()*situation.length); jqo.append("<div class='slot' id="+i+">"+situation[ctr]+"</div>"); } } function moveSlots(jqo){ var time = 1000; time += Math.round(Math.random()*1000); jqo.stop(true,true); var marginTop = parseInt(jqo.css("margin-top"), 10) marginTop -= (7 * 100) jqo.animate( {"margin-top":marginTop+"px"}, {'duration' : time, 'easing' : "linear"}).promise().done(function () { // alert($("div.slot").not(":hidden").prop("id")); }); } 

 .slot { display:flex;align-items:center;justify-content:center;} .first-step-div{ background:#dddddd; margin:0 auto; text-align:center; padding:80px 0px; position:relative; } #back_link{ position: absolute; left: 34px; bottom: 28px; } .problem-count{ height:45px; width:50px; border-radius:10px; margin-bottom:10px; background:#e7e8e9; } .problem-count span{ position: relative; top: 4px; font-size:25px; font-weight:700; } .label-text{ font-size:20px; color:#444; font-weight:600; } .earned-dibbs{ font-size:40px; font-weight:600; } .problem-count.active{ height:50px; width:50px; border-radius:10px; margin-bottom:10px; background:#fff !important; } .sticky-notes{ padding:30px; } .round-1{ background:#fff; margin:0 auto; text-align:center; border-radius:15px; width:320px; padding:50px 0px; } .problem-text{ background: #fff; border-radius: 10px; overflow: auto; width: 376px; font-size: 16px; text-align: left; padding: 15px; color:#58585a; min-height: 172px; max-height:172px; } .problem-user-icon{ height:25px; width:25px; background:#18b1a0; margin-bottom:10px; } .round-label{ font-size:30px; color:#f05f9d; font-weight:700; } .round-label-text{ font-size:24px; color:#18b1a0; cursor:pointer; } .count-knowls div{ display:inline; } .knowls-num, .dibbs-num{ font-size:25px; font-weight:700; } .spin-title{ font-size:20px; padding:8px 15px; text-align:center; background:#ddd; border-radius:10px; font-weight:700; width:268px; position: relative; top: 8px; } .title-border{ border:5px dotted #999; } .page-header{ margin:0px; } #rcorners_parent { position: relative; background: #ddd; padding: 20px; border-radius: 15px 50px 50px 15px / 8% 80% 80% 8%; overflow: hidden; padding: 42px 0px 32px 0px; } #rcorners_parent::after { content: ""; position: absolute; top: 10%; left: -15px; width: 25px; height: 80%; background-color: #bdbec0; border-radius: 100%; } #slots_a { position: relative; background: #fff; padding: 0 20px; width: 170px; height: 117px; border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%; overflow: hidden; display:inline-block; margin-right:15px; } #slots_a::after { content: ""; position: absolute; top: 10%; left: -15px; width: 25px; height: 80%; background-color: #109582; border-radius: 100%; display:inline-block; margin-right:15px; } #slots_b { position: relative; background: #fff; padding: 0 20px; width: 225px; height: 117px; border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%; overflow: hidden; display:inline-block; margin-right:15px; } #slots_b::after { content: ""; position: absolute; top: 10%; left: -15px; width: 25px; height: 80%; background-color: #109582; border-radius: 100%; display:inline-block; margin-right:15px; } #slots_c { position: relative; background: #18b1a0; padding: 20px; width: 225px; height: 100px; border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%; overflow: hidden; display:inline-block; } #slots_c::after { content: ""; position: absolute; top: 10%; left: -15px; width: 25px; height: 80%; background-color: #109582; border-radius: 100%; display:inline-block; } .slot { font-size:32px; } .slots .wrapper{ margin-top:0px; width:100px; } .slots .slot{ width:100px; height:117px; text-align:center; } .spin-person{ font-size:16px; } .nob-img{ position: absolute; top: 18px; right: -26px; } .spin{ background:#18b1a0 !important; border:1px solid #18b1a0 !important; color:#fff !important; font-weight:600 !important; } .spin:hover{ background:#18b1a0 !important; border:1px solid #18b1a0 !important; color:#fff !important; font-weight:600 !important; } .spin-button{ padding:10px 34px; border-radius:14px; font-weight:600; font-size:20px; } .pink{ background:#f05f9d; border:1px solid #f05f9d; color:#fff; font-weight:600; } .pink:hover{ background:#f05f9d; border:1px solid #f05f9d; color:#fff; font-weight:600; } .pink-button{ padding: 10px 11px; border-radius: 14px; font-weight: 600; font-size: 16px; } .step-one, .step-two{ background:#e1e65d !important; border-radius:25px; font-size:20px; color:#fff; border-color:#e1e65d !important; font-weight:600; padding:10px 15px; cursor:pointer; } .step-three{ background:#f05e9d !important; border-radius:25px; font-size:20px; color:#fff; border-color:#f05e9d !important; font-weight:600; padding:10px 15px; cursor:pointer; } .step-four{ background:#54cbec !important; border-radius:25px; font-size:20px; color:#fff; border-color:#54cbec !important; font-weight:600; padding:10px 15px; cursor:pointer; } .glyphicon-triangle-bottom{ position:relative; top:4px; } .gif-title{ color:#f074a9; font-size:18px; font-weight:600; text-align:center; margin-top:10px; } .col-centered{ float: none; margin: 0 auto; } .gif-box{ text-decoration:none; cursor:pointer; } .gif-box:hover{ text-decoration:none; cursor:pointer; } .orange-button{ padding:10px 34px; border-radius:14px; font-weight:600; font-size:20px; } .btn-container{ margin:18px 0px; } .draw-steps{ border:2px dashed #666; border-radius:10px; margin-bottom:30px; } .step-num{ color:#666; font-size:50px; font-weight:600; position:relative; top:10px; } .idea-steps-label{ font-size:18px; text-align:left; } .draw-title{ color:#54cbec; font-size:20px; text-align:left; font-weight:600; margin-bottom:10px; } a:hover{ text-decoration:none !important; } .btn.grey { background: grey none repeat scroll 0 0; border-color: grey; color: #fff; cursor:not-allowed !important; pointer-events:auto !important; } .glyphicon-circle-arrow-left{ left: -10px; } #back_link .glyphicon{ font-size:48px !important; color:#818285 !important; } #back_link .glyphicon:hover{ color:#2abbb5 !important; } @media screen and (max-width: 600px){ #back_link { position:absolute; bottom:5px; left:5px; } #back_link .glyphicon{ font-size:35px !important; } .step-one, .step-two, .step-three, .step-four{ font-size:18px; } } .sticky { margin: 0; padding: 8px 10px; width:205px; height:200px; font-size: 1.4em; border:1px #E8Ds47 solid; background:#f2f4ce; box-shadow: 3px 3px 5px #666; -moz-box-shadow: 3px 3px 5px #666; -webkit-box-shadow: 3px 3px 5px #666; } .sticky p { text-align: center; } .sticky textarea { width:184px; height:180px; background:#f2f4ce; border-bottom:none !important; } .sticky ol { margin: 12px; } .r-index{ z-index: 0; } .a-index{ z-index: 99; } .sticky-container { position: relative; } .sticky { position: absolute; } /*time container*/ button[data-setter] { outline: none; background: transparent; border: none; font-family: 'Roboto'; font-weight: 300; font-size: 18px; width: 25px; height: 30px; color: #F7958E; cursor: pointer; } button[data-setter]:hover { opacity: 0.5; } .time-container { position: relative; top: 130px; width: 300px; margin: 0 auto; text-align: center; } .setters { position: absolute; left: 85px; top: 75px; } .minutes-set { float: left; margin-right: 28px; } .seconds-set { float: right; } .controlls { position: absolute; left: 37%; top: 52px; text-align: center; } .display-remain-time { font-weight: 700; font-size: 32px; color: #fff; } #pause { outline: none; background: transparent; border: none; margin-top: 10px; width: 50px; height: 50px; position: relative; } .play::before { display: block; content: ""; position: absolute; top: 8px; left: 16px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 22px solid #F7958E; } .pause::after { content: ""; position: absolute; top: 8px; left: 12px; width: 15px; height: 30px; background-color: transparent; border-radius: 1px; border: 5px solid #F7958E; border-top: none; border-bottom: none; } #pause:hover { opacity: 0.8; } .ec-base { fill: none; stroke: #fff; stroke-width: 4px } .ec-progress { fill: none; stroke: #18b1a0; stroke-width: 10px; transition: stroke-dashoffset 0.7s; -webkit-transition: stroke-dashoffset 0.7s; } .ec-pointer { fill: #FFF; stroke: #F7958E; stroke-width: 2px; } #e-pointer { transition: transform 0.7s; -webkit-transition: -webkit-transform: 0.7s; } .sticky-note-div{ background:#f2f4ce; box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; height:215px; width:22%; display:inline-block; margin-right:2%; margin-bottom:10px; position:relative; cursor:pointer; } .sticky-note-div img{ position: absolute; right: 5px; top: 5px; } .sticky-note-div:last-child{ margin-right:0px; } @media only screen and (max-width: 768px) { .nob-img { position: absolute; top: 41px; right: -26px; } #slots_a { width:160px; margin-right:15px; } #slots_b { width:205px; margin-right:15px; } #slots_c { width:205px; margin-right:0px; } .time-container { position: relative; top: 35px; } } @media only screen and (max-width: 540px) { .nob-img { position: absolute; top: 262px; right: -22px; } #slots_a, #slots_b, #slots_c { width:210px; margin-right:0px; margin-bottom:10px; } .problem-text{ visibility:hidden; } } .card{ background:#fff; margin-bottom:40px; } .card .tab-content{ max-width:100% !important; font-size:18px !important; min-height: 300px; max-height:514px; overflow: auto; } .card .nav-tabs { border-bottom: 2px solid #DDD; } .card .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; } .card .nav-tabs > li > a { border: none; color: #ffffff;background: #58585a; font-size:16px;font-weight:600;} .card .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #58585a !important; background: #fff; } .card .nav-tabs > li > a::after { content: ""; background: #58585a; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; -webkit-transition: all 250ms ease 0s; transform: scale(0);-webkit-transform: scale(0); } .card .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1);-webkit-transform: scale(1); } .card .tab-nav > li > a::after { background: #58585a none repeat scroll 0% 0%; color: #fff; } .card .tab-pane { padding: 15px 0; } .card .tab-content{padding:20px} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="position:relative;"> <div id="rcorners_parent"> <div class="slots" id="slots_a"> <div class="wrapper" ></div> </div> <div class="slots" id="slots_b"> <div class="wrapper" ></div> </div> <div id="spin_btn_div"> <div class="btn-container" style="margin-bottom:0px;"> <button id="proceed_btn" style="display:none;font-size:20px;" class="btn pink pink-button shooter-btn" onClick="go();">Proceed</button> <button id="spin_btn" style="margin-left:10px;margin-right:10px;" class="btn spin spin-button shooter-btn" onClick="go();">Spin</button> </div> </div></div> </div>