圓格，垂直和水平居中對齊

我有以下代碼：圓格，垂直和水平居中對齊

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#playhead-outercircle{ 
width:10px; 
height:10px; 
border-style:solid; 
border-width:1px; 
border-radius:100px; 
cursor:pointer; 
} 
#playhead-innercircle{ 
width:7px; 
height:7px; 
border-style:solid; 
border-width:1px; 
border-radius:100px; 
cursor:pointer; 
} 
</style> 
</head> 
<body> 
<div id="playhead"> 
<div id="playhead-outercircle"><div id="playhead-innercircle"></div></div> 
</div> 
</body> 
</html>

，這裏是它的樣子：

output

怎麼樣，讓我的內格，出現在父母的中間，縱向和橫向？

請幫助...

三江源提前！

來源

2013-07-13 tenstar

，只需添加填充到#playhead-outercircle

#playhead-outercircle { 
    width:10px; 
    height:10px; 
    border-style:solid; 
    border-width:1px; 
    border-radius:100px; 
    cursor:pointer; 
    padding: 1px 0 0 1px; 
}

演示 - jsFiddle

來源

2013-07-13 09:34:16 Pete

真棒，回答兄弟，我接受它並加上投票！ – tenstar

答案沒有問題，但這在技術上是解決方案的不正確方法 –

您所使用的尺寸非常小，所以我爲了演示

Demo

比例增加它

#playhead-outercircle{ 
    width:100px; 
    height:100px; 
    border-style:solid; 
    border-width:1px; 
    border-radius:100px; 
    cursor:pointer; 
    position: relative; 
} 

#playhead-innercircle{ 
    width:70px; 
    height:70px; 
    border-style:solid; 
    border-width:1px; 
    border-radius:100px; 
    cursor:pointer; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -35px; 
    margin-top: -35px; 
}

說明：

我們正在使用position: relative;的容器div所以那absolute div不會在野外推出，比我們使用left, top50%並且否定0123的1/2來自內部div的和width將其定位在容器元素的確切中心。

注意：您正在使用非常小的尺寸px，所以我建議你一輪多達8或6這樣你就可以輕易地否定尺寸。你還用的是 1px邊界，如果你打算保持相同的尺寸，應該考慮以及

來源

2013-07-13 09:26:47

不，但我正在設計播放頭，對於我的視頻播放器，是不可能的小型播放頭 – tenstar

@tenstar比你應該檢查[font awesome]（http://fortawesome.github.io/Font-Aw esome /）:) –

圓格，垂直和水平居中對齊

回答

相關問題