Круговая ДИВ, вертикальный и горизонтальный центр выравнивания

У меня есть следующий код:Круговая ДИВ, вертикальный и горизонтальный центр выравнивания

<!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

как, я делаю внутренний DIV, появляется прямо в середине родителя, как по вертикали, так и по горизонтали?

Пожалуйста, помогите ...

Заранее благодарю!

источник

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; 
}

Demo - 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% и чем отрицаем 1/2 of height и width от внутреннего div, чтобы расположить его в точном центре элемента контейнера.

Примечание: Вы используете очень маленький px размер, так что я хотел бы предложить вам круглый, что вверх на 8 или 6, так что вы можете легко свести на нет размеры. Кроме того, вы используете 1px границы, которые следует рассматривать как колодце

источник

2013-07-13 09:26:47

нет, но я разрабатываю playheads, для моего видеопроигрывателя, невозможно для маленьких головок игры – tenstar

@tenstar, чем вы должны проверить [font awesome] (http://fortawesome.github.io/Font-Aw esome /) :) –

Круговая ДИВ, вертикальный и горизонтальный центр выравнивания

ответ

Смежные вопросы