Css DIV в другой DIV центра изображения

Question

я следующий HTML-код:

<div id="inner"> 
    <div id="wrap"> 
     <img src="images/thumb/3.jpeg"/> 
     </div> 
</div> 

И следующий стиль применяется к нему:

body{ 

    background:url(pattern/pattern1.png); 
} 
#inner{ 
    margin:0 auto; 
    position:relative; 
    height:400px; 
    width:400px; 
    background:#669; 
    text-align:center; 
} 

#wrap{ 

    width:50%; 

    margin:0 auto; 

} 

Проблема заключается в том, что изображение всегда оставаться ТОП- центрированный во внутреннем div, но я хочу, чтобы он находился в центре обертывания

! ------------------------------ -------------------------------------------- По-прежнему такая же проблема и heres код в jsfiddle: http://jsfiddle.net/RNhvz/

Answer 1

Вы должны применить запас к изображение элемента непосредственно: JSFiddle example1

Answer 2

Ваш margin: 0 auto является частью вашей проблемы.

Знаете ли вы высоту своего изображения? Я предполагаю, что он под 400px. Измените 0 на ваш стиль margin на половину разницы между 400 и высотой изображения.

Например, если изображение высотой 200px, изменить margin стиль:

margin: 100px auto

(400 - 200)/2 = 100

Answer 3

Если #inner всегда будет иметь высоту 400px затем просто использовать этот код:

#inner{ 
    /* Your code: */ 
    margin:0 auto; 
    position:relative; 
    height:400px; 
    width:400px; 
    background:#669; 
    text-align:center; 

    /* Solution part I. */ 
    line-height: 400px; 
} 

/* Solution part II. */ 
img { 
    margin: 0 auto; 
    vertical-align: middle; 
} 

Таким образом, изображение будет центрироваться как по вертикали, так и по горизонтали и, что более важно, это решение не требует, чтобы вы знали размер изображения. И вам не нужен div #wrap. Вы можете сохранить свой синтаксис HTML, но нет необходимости в правилах ширины и полей этого элемента.

Вот рабочий код: http://tinkerbin.com/YOjVvnVZ.