центр DIV в DIV в нем без использования маржинального авто

Question

попытался выравнивания текста центр и окраина авто, как не работает, и я не хочу, чтобы использоваться, чтобы использовать «маржинальный хак» для центрирования ..

http://jsfiddle.net/st9AM/1/

.circle{ 

float: left; 
position: relative; 
width: 120px; 
height: 120px; 
border-radius: 50%; 
border: 2px solid #DDD; 
} 

.inner{ 
float: left; 
position: relative; 
width: 60px; 
height: 60px; 
border-radius: 50%; 
border: 2px solid #DDD; 
} 

Answer 1

Прежде всего, с помощью margin: auto; является не хак

И центрирования круг внутри круга, вы можете использовать методы позиционирования, как position: absolute;. Здесь я использую position: absolute; на внутренней окружности, чем задает top и left свойства со значением 50% и чем я использую margin-top и margin-left и вычитать 1/2 от height и width.

Почему вычитается 32px? Как я уже сказал, вычитают ровно половину от width и , так что это также включает border вашего элемента, который установлен в 2px, что делает ваш элемент 64px в height и width соответственно.

Для vertical-align+ символ, я использую line-height свойство, как я могу видеть только один символ, чтобы быть выровнены по вертикали (вы не сказали, но технически я могу предположить, что форма, которую вы ищете), в качестве альтернативы вы можете также использовать vertical-align: middle; но вам необходимо установить элемент контейнера для display: table-cell;

Demo

---

Последнее, но не менее, вы должны гнездо span тег внутри внутреннего круга div.

.circle{ 
    float: left; 
    position: relative; 
    width: 120px; 
    height: 120px; 
    border-radius: 50%; 
    border: 2px solid #DDD; 
} 

.inner{ 
    text-align: center; 
    line-height: 60px; 
    position: absolute; 
    top: 50%; 
    margin-top: -31px; 
    left: 50%; 
    margin-left: -31px; 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    border: 2px solid #DDD; 
} 

Answer 2

Вы были "Поплавок: левый" во внутреннем круге, который вам не нужно

//float: left; 

Working fiddle

Answer 3

удалить поплавка влево и использовать запас: 0 авто;

.circle{ 

     position: relative; 
     width: 120px; 
     height: 120px; 
     border-radius: 50%; 
     border: 2px solid #DDD; 
     margin:0 auto; 
     } 

Answer 4

Посмотрите на это fiddle. Вы написали float:left; и хотели центрировать изображение. Удалите float:left;, и он отлично работает.

Answer 5

Here's более чистый раствор.

только с одним HTML-элементом.

HTML:

<div class='circle'></div> 

CSS:

* 
{ 
    margin: 0; 
    padding: 0; 
} 
.circle, .circle:after 
{ 
    border-radius: 50%; 
    border: 2px solid #DDD; 
    text-align: center; 
} 
.circle 
{ 
    width: 120px; 
    height: 120px; 
    font-size: 0; 
} 
.circle:before { 
    content:''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
.circle:after 
{  
    content:'+'; 
    font-size: 20px; 
    padding: 20px 0; /* 2*padding + font size = innerCircle height*/ 
    display: inline-block; 
    vertical-align: middle; 
    width: 50%; 
}