Абсолютное положение img в div

Как центрировать выравнивание img с абсолютным позиционированием в ячейке div или таблицы, если я не знаю ширины изображения?Абсолютное положение img в div

, например

<div style="position: relative"> 
    <img style="position: absolute" /> 
</div>

источник

2013-07-17 user2560165

Совместимо с чем? где? – raam86

Редактировать мой вопрос: center and i dont know width – user2560165

Не могли бы вы применить его как фоновое изображение родительского элемента? –

img { 
display: block; 
margin: 0 auto;  
}

Проверить это JSFIDDLE1

или

div { 
position: relative; 
text-aligm: center; 
width:2000px; 
} 

img { 
position: absolute; 
}

Проверить это JSFIDDLE2

источник

2013-07-17 11:04:41 Praveen

обновил мой вопрос - я не знаю ширины: без поля ширины: 0 auto; не работает – user2560165

@ user2560165 добавили 'display: block' вместе с ним. – Praveen

Вы можете использовать negat ив Маржа трюк, предположил, что вы знаете размеры изображения:

img{ 
    top:50%; 
    left:50%; 
    margin-left : -(<imagewidth>/2)px; 
    margin-height: -(<imageheight>/2)px; 
}

, когда вы только целевой браузеры, которые поддерживают эту функцию calc() вы могли бы сделать:

img{ 
    top: calc(50% - <imagewidth>/2px); 
    left: calc(50% - <imageheight>/2px); 
}

Когда браузер поддерживает перевод вы можете перевести его -50% изображающего размеры:

img{ 
    top: 50%; 
    left: 50%; 
    position: absolute; 
    transform: translate(-50%, -50%); 
}

Если ничего из этого не возможно, ваш последний курорт изменяется разметки и display:table:

<div> 
    <div> 
    <img /> 
    </div> 
</div> 

div{height:100%;width:100%; 
    display:table; 
    text-align: center; 
    vertical-align: middle;} 
div>div{ 
    display:table-cell; 
}

see Demo for latest case

источник

2013-07-17 11:05:20 Christoph

обновлено: я не знаю ширины изображения – user2560165

@ user2560165 видя из другого ответа, что вам нужно поддерживать IE8, возможно, взгляните на мой средний ответ. – Christoph

Выравнивает элемент по горизонтали и вертикали с относительным родителем.

<div style="position: relative"> 
    <img class="centered" /> 
</div> 

.centered { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

«верх» и «левый», установленные на 50%, будут центрировать верхний левый угол элемента. Перевод на -50% для X и Y устанавливает элемент в точный центр родителя.

Для поддержки браузера посмотрите здесь: Translate2d - caniuse.com

источник

2013-07-17 11:07:20

действительно круто, но т. Е. 8 не нравится этот трюк: P – user2560165

@MyHeadHurts Он сосредоточен в родительском элементе в вашей скрипке. Высота родительских элементов - 0px. Вот почему он размещен -50% сверху. –

@ KilianStinson Ах, извините, я вижу сейчас. Вы центрировались горизонтально * и * вертикально! Извините, я не должен читать SO и стараться работать одновременно;) Хорошее решение! –

Простой путь к центру изображения по вертикали

если вы знаете высоту дел. то вы можете сделать изображение как вертикальное выравнивание.

div{ 
    text-align:center; 
    height:150px; 
    line-height: 150px; 
} 

img{ 
    vertical-align: middle; 
}

источник

2015-12-28 08:08:28 krishdev

Абсолютное положение img в div

ответ

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