使文本在圆柱形div中相对于其内容垂直居中

Question

我试图将文本垂直放置在中心，但它并没有停留在中心，其内容正在改变，请帮助我

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

我设法得到了理想的结果。 请参阅下面的代码段

代码添加.slot { display:flex;align-items:center;justify-content:center;}

从.slots .wrapper删除了margin-top:6px .slots .wrapper

更改padding:20px到padding:0 20px .slots_a on .slots_a和.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>