jquery - 在非表格布局中将两个圆圈居中

Question

我有两个圆圈，一个是 svg，另一个是样式链接。带样式的链接位于 svg 之上。圆形链接必须在 svg 上水平和垂直居中。通过使用 javascript 动态定位它，我已经非常接近了。

这是 fiddle :http://jsfiddle.net/arcco96/pf76Laux/3/ (按开始查看它的运行情况)

jquery 最终将此写在文档上:

<svg id="svg">
   <path id="timer" fill="#66ff66" />
 </svg>

 <a class="round-button"><p>Ok</p></a>`

如果检查代码，您会发现圆圈没有居中。

如果您可以解决此问题或对此有任何想法，我想听听他们的意见。

谢谢

Answer 1

添加 'top': (top + 8) + 'px', 'left': '50%', 'margin-left': (-widthOf/2) + 'px', 当您设置 .round-button 的 CSS 属性时。

此外，将 box-sizing: border-box 添加到 CSS 中的 .round-button。

Updated Fiddle

var cv = $(window).width();

function createTimer(widthOf) {
  var timer = document.getElementById('timer');
  var svg = document.getElementById('svg');
  var width = widthOf;
  svg.setAttribute('width', width);
  svg.setAttribute('height', width);
  var t = 5;
  var theta = 0;
  var radius = svg.getAttribute('width') / 2;
  timer.setAttribute('transform', 'translate(' + radius + ',' + radius + ')');

  (function animate() {
    theta += 0.5;
    theta %= 360;
    var x = Math.sin(theta * Math.PI / 180) * radius;
    var y = Math.cos(theta * Math.PI / 180) * -radius;
    var d = 'M0,0 v' + -radius + 'A' + radius + ',' + radius + ' 1 ' + ((theta > 180) ? 1 : 0) + ',1 ' + x + ',' + y + 'z';
    timer.setAttribute('d', d);
    setTimeout(animate, t)
  })();
}

function createButton(widthOf, top, left) {
  $('<a>', {
    class: 'round-button',
  }).appendTo('#container');

  $('.round-button').css({
    'height': (widthOf) + 'px',
    'width': (widthOf) + 'px',
    'top': (top + 8) + 'px',
    'left': '50%',
    'margin-left': (-widthOf / 2) + 'px',
    'font-size': (widthOf / 3) + 'px',
  });

  $('<p>', {
    text: 'tap',
  }).appendTo('.round-button');

}

$("#btn1").click(function() {
  createTimer(.8 * cv);
  var ml = (.25 * cv) / 2;
  var mt = (.05 * cv) / 2;
  createButton((.75 * cv), mt, ml);
});

body {
  background: skyBlue;
  text-align: center;
}
#svg {
  position: relative;
  z-index: 0;
}
#overlay {
  position: absolute;
  left: 20%;
  z-index: 5;
  background-color: green;
  width: 60%;
  height: 30px;
  top: 5px;
}
.round-button {
  position: absolute;
  width: 400px;
  z-index: 9999999;
  display: block;
  width: 500px;
  height: 500px;
  line-height: 50px;
  border: 5px solid #f5f5f5;
  border-radius: 50%;
  color: #f5f5f5;
  text-align: center;
  text-decoration: none;
  background: #464646;
  box-shadow: 0 0 3px gray;
  font-size: 20px;
  font-weight: bold;
  box-sizing: border-box;
}
.round-button p {
  vertical-align: middle;
}
.round-button:focus {
  background: #262626;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <svg id="svg">
    <path id="timer" fill="#66ff66" />
  </svg>
</div>
<button id="btn1">start</button>