Место и центрирования изображения внутри DIV

Question

Я имею следующую структуру:

<div style="height: 100px; width: 33%; line-height: 100px;"> 
    &nbsp;<img style="height: auto; width: auto; max-height: 90px; max-width: 90%; vertical-align: middle;"> 
</div> 

Так что я хочу, чтобы центрировать изображение внутри родительского DIV вертикально, и держать его в масштабе все время. line-height Недвижимость позаботится о центрировании изображения.

Проблема в том, что для line-height работать мне нужно текст внутри DIV, поэтому я добавил  , но это означает, что изображение снесен - ширина устанавливается на 100%, а изображение в новой строке - 100px ниже  .

Если я добавляю display: block; к изображению, он также устанавливает ширину 100% и снимается.

Как я могу это решить?

Answer 1

div > img { background-size: contain; } 

http://www.w3schools.com/cssref/css3_pr_background-size.asp

, насколько ширины 90%, просто обернуть изображение в другой DIV с опцией СОДЕРЖАТЬ, то размер, который Div внутри обертки на 90%