Горизонтальный центр динамического изображения в div с абсолютной позицией
Я искал во всем Интернете этот ответ, но мне кажется, что для горизонтального центрирования изображения в div с абсолютным положением мне нужно знать размеры изображения, но это 'с динамикой.
Вот мой HTML:
<img src="http://www.ftiweb.com/images/eStore/eStore_wht50.png">
TOUR | MENU
<img class="ipad" src="http://ftiweb.com/images/eStore/Ipad_hand.png">
© FTIeStore 2013 • Privacy Policy
и вот .css I 'м с помощью:
#content {
width: 70%;
height: 80%;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -35%;
display: table-cell;
img.ipad {
max-width: 100%;
max-height: 100%;
position: absolute;
bottom: 0px;
display: block;
}
Цель состоит в том, чтобы изображение оставалось внизу / в центре страницы и изменяло размер в соответствии с окном браузера. Если я'Я усложняю это, пожалуйста, не стесняйтесь предложить альтернативу.
Вот ссылка на js.fiddle: