javascript - 我怎样才能在每个按钮上方居中放置一个长字符串？

Question

我想让我的文字在每个圆圈居中!它只需要 40px 宽度并向右移动，这并不好。我真的很困惑如何在圆圈上方居中放置文本。

提前致谢! :)

$('.dot:nth-child(1)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '10%'
  }, 500);
});
$('.dot:nth-child(2)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '20%'
  }, 500);
});
$('.dot:nth-child(3)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '30%'
  }, 500);
});
$('.dot:nth-child(4)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '40%'
  }, 500);
});
$('.dot:nth-child(5)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '50%'
  }, 500);
});
$('.dot:nth-child(6)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '60%'
  }, 500);
});
$('.dot:nth-child(7)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '70%'
  }, 500);
});
$('.dot:nth-child(8)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '80%'
  }, 500);
});
$('.dot:nth-child(9)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '90%'
  }, 500);
});

div#timeline {
  background-color: #6ab0de;
  margin-top: 150px;
  height: 10px;
  width: 100%;
  position: relative;
}
div#timeline .inside {
  position: absolute;
  height: 4px;
  background-color: #fff;
  width: 0%;
  top: 3px;
  left: 0;
}
div#timeline .dot {
  z-index: 99;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  text-align: center;
  cursor: pointer;
}
div#timeline .dot:nth-child(1) {
  left: 10%;
}
div#timeline .dot:nth-child(2) {
  left: 20%;
  background-color: #e74c3c;
}
div#timeline .dot:nth-child(3) {
  left: 30%;
  background-color: #7b3;
}
div#timeline .dot:nth-child(4) {
  left: 40%;
  background-color: #20638f;
}
div#timeline .dot:nth-child(5) {
  left: 50%;
  background-color: #7cdbd5;
}
div#timeline .dot:nth-child(6) {
  left: 60%;
  background-color: #f39c12;
}
div#timeline .dot:nth-child(7) {
  left: 70%;
  background-color: #2c3e50;
}
div#timeline .dot:nth-child(8) {
  left: 80%;
  background-color: #e74c3c;
}
div#timeline .dot:nth-child(9) {
  left: 90%;
  background-color: #7b3;
}
div#timeline .dot:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
div#timeline .dot date {
  font-family: roboto;
  font-size: 1.1rem;
  display: block;
  position: relative;
  top: -60px;
  text-align: center;
}
div#timeline .dot span {
  display: inline-block;
  margin-top: 10px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

<div id="timeline">

  <div class="dot" id="1" style="background-color: #2c3e50;">
    <span></span>
    <date>Page&nbsp;1</date>
  </div>

  <div class="dot" id="2">
    <span></span>
    <date>Page&nbsp;2</date>
  </div>

  <div class="dot" id="3">
    <span></span>
    <date>Large&nbsp;TEXT&nbsp;HERE</date>
  </div>

  <div class="dot" id="4">
    <span></span>
    <date>P4</date>
  </div>

  <div class="dot" id="5">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="6">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="7">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="8">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="9">
    <span></span>
    <date>P5</date>
  </div>

  <div class="inside"></div>

</div>

Answer 1

正确的方法是使用 CSS 转换。这允许流畅的布局。

代码笔:http://codepen.io/ovitrif/pen/eBPEVV

我做的很简单，我修改了 div#timeline .dot date 的 CSS 规则如下:

div#timeline .dot date {
  /*
  font-family: roboto;
  font-size: 1.1rem;
  display: block;
  top: -60px;
  text-align: center;
  */
  position: absolute;
  left: 20px; /* This has to be equal with the half of the dot width.*/
  transform: translatex(-50%);
}