Center texts inside circles & fadeToggle not working

Question

This is my first question in the StackOverflow. So, please let me know if I didn't follow a rule of posting a question well. :)

[Problem 1]

I tried to solve my issue of having texts centered in circles by reading the following posts:

However, I couldn't solve my issue. I would like to move texts in circles into the middle of the circle to make the texts horizontally & vertically in the center of the circles.

[Problem 2]

Hidden circles show up after clicking the "test" button. However, the circles do not disappear after clicking the button again.

If anyone can give me an advice, I would really appreciate it! :)

Solved!

This question is not a duplicate, because I wanted to center text while using translate() and got confused with using between "fadeToggle()" and ":hidden with fadeIn()".

$(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>

duplicate of : https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div — Temani Afif, Jul 31 '18 at 09:20
duplicate of : https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block?rq=1 — Temani Afif, Jul 31 '18 at 09:20
duplicate of : https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — Temani Afif, Jul 31 '18 at 09:21
This question is not a duplicate, because I wanted to center text while using translate() and got confused with using between "fadeToggle()" and ":hidden with fadeIn()". — Lim, Jul 31 '18 at 11:27
and that's why I didn't *close* as duplicate, but I shared the link that shows how we can center and also fixed you jQuery issue to avoid answering the same issue again and again and again — Temani Afif, Jul 31 '18 at 11:34

Lasithe · Accepted Answer · 2018-07-31T09:30:48.017

Add this css code

top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);

to .options span to center the text, problem 1.

Remove :hidden from the jquery statement to solve your problem 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>

score -1 · Answer 2 · answered Jul 31 '18 at 09:30

$(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>

Center texts inside circles & fadeToggle not working

[Problem 1]

[Problem 2]

Solved!

2 Answers2