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

时间：2017-11-16 05:06:31

标签： javascript jquery html css css3

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

＆＃13;
＆＃13; 
//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"));
		});
}
＆＃13; 
.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; }

.e-c-base {
  fill: none;
  stroke: #fff;
  stroke-width: 4px
}

.e-c-progress {
  fill: none;
  stroke: #18b1a0;
  stroke-width: 10px;
  transition: stroke-dashoffset 0.7s;
  -webkit-transition: stroke-dashoffset 0.7s;
}

.e-c-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}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

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

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

从margin-top:6px

中删除了.slots .wrapper

在padding:20px和padding:0 20px

上将.slots_a更改为.slots_b

＆＃13;
＆＃13; 
//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"));
		});
}
＆＃13; 
.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; }

.e-c-base {
  fill: none;
  stroke: #fff;
  stroke-width: 4px
}

.e-c-progress {
  fill: none;
  stroke: #18b1a0;
  stroke-width: 10px;
  transition: stroke-dashoffset 0.7s;
  -webkit-transition: stroke-dashoffset 0.7s;
}

.e-c-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}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题