这是我在StackOverflow中的第一个问题。因此,请让我知道我是否没有遵循正确发布问题的规则。 :)
我试图通过阅读以下帖子来解决文本以圆圈为中心的问题:
但是,我无法解决我的问题。我想将圆形的文本移动到圆形的中间,以使文本水平和垂直地位于圆形的中心。
单击“测试”按钮后,将显示隐藏的圆圈。但是,再次单击该按钮后,圆圈不会消失。
如果有人可以给我建议,我将不胜感激! :)
$(document).ready(function() {
$('#test').click(function() {
$(".options:hidden").fadeToggle();
});
});
body {
font-family: 'Poor Story', sans-serif;
}
#test {
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
}
#option1 {
transform: translate(-100%, -150%);
}
#option2 {
transform: translate(-160%, -40%);
}
#option3 {
transform: translate(-50%, 50%);
}
#option4 {
transform: translate(60%, -40%);
}
#option5 {
transform: translate(15%, -150%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" id="option1"><span>Hello<br>World</span></div>
<div class="options" id="option2"><span>Goodbye</span></div>
<div class="options" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" id="option4"><span>Fine</span></div>
<div class="options" id="option5"><span>Okay</span></div>
</div>
</body>
<footer>
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
</footer>
</html>
答案 0 :(得分:1)
添加此CSS代码
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
到.options span
以使文本居中,问题1。
从jquery语句中删除:hidden
以解决您的问题2。
$(document).ready(function() {
$('#test').click(function() {
$(".options").fadeToggle();
});
});
body {
font-family: 'Poor Story', sans-serif;
}
#test {
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
#option1 {
transform: translate(-100%, -150%);
}
#option2 {
transform: translate(-160%, -40%);
}
#option3 {
transform: translate(-50%, 50%);
}
#option4 {
transform: translate(60%, -40%);
}
#option5 {
transform: translate(15%, -150%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" id="option1"><span>Hello<br>World</span></div>
<div class="options" id="option2"><span>Goodbye</span></div>
<div class="options" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" id="option4"><span>Fine</span></div>
<div class="options" id="option5"><span>Okay</span></div>
</div>
</body>
<footer>
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
</footer>
</html>
答案 1 :(得分:-1)
$(document).ready(function() {
$('#test').click(function(){
$(".options").fadeToggle();
});
});
body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: table;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
display: table-cell;
color: #000000;
vertical-align: middle;
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" id="option1"><span>Hello<br>World</span></div>
<div class="options" id="option2"><span>Goodbye</span></div>
<div class="options" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" id="option4"><span>Fine</span></div>
<div class="options" id="option5"><span>Okay</span></div>
</div>
</body>
<footer>
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
</footer>
</html>