비 테이블 레이아웃에서 두 개의 원 중심 맞추기

Question

두 개의 원이 하나 있는데 하나는 svg이고 다른 하나는 스타일이 지정된 링크입니다. 스타일 링크는 svg 위에 위치합니다. 서클 링크는 svg에서 수평 및 수직으로 가운데에 있어야합니다. 나는 javascript로 역동적으로 배치함으로써 정말로 가까이에왔다. 여기

는 바이올린 : 당신이 코드를 선택하면 당신이 원 것을 볼 수

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

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

: http://jsfiddle.net/arcco96/pf76Laux/3/

가 JQuery와 결국 문서에이 글을 (를 눌러 시작 행동에 그것을보고) 중심에 있지 않습니다.

이 문제를 해결하거나 이에 대한 의견이 있으시면 언제든지 알려주십시오. 당신이 .round-button의 CSS 속성을 설정할 때

감사

Answer 1

는 'top': (top + 8) + 'px', 'left': '50%', 'margin-left': (-widthOf/2) + 'px', 추가합니다.

또한 CSS에 box-sizing: border-box ~ .round-button을 추가하십시오.

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>