Как интегрировать IMG в DIV во всех браузерах

Я прочитал все трюки с результатами Google, но я не могу центрировать изображение в div.Как интегрировать IMG в DIV во всех браузерах

Например, это популярный трюк: http://webdesign.about.com/od/beginningcss/a/aa012207.htm или http://www.w3.org/Style/Examples/007/center.en.html не работает в IE 8.
Я попробовал другой из Stackoverflow, но он не работает в Opera.

Так что я думаю, что один трюк работает в большинстве браузеров (IE8, Firefox, Safari, Opera, Maxthon, K-дыня, SeaMonkey):

<p style="text-align:center"><img style="display: block; margin-left: auto; margin-right: auto;" src="parliament.gif" width="200" height="71"></p>

Любые комментарии?

источник

2012-06-22 AgA

Это зависит от того, что вы хотите от центра: блок элемент с явной шириной, или встроенный элемент:

http://jsfiddle.net/VNuFH/

центр блок-изображение:

<div> 
    <img style="display: block; margin: 0 auto;" src="..."> 
</div>

Центр инлайн изображение :

<div style="text-align: center;"> 
    <img src="..."> 
</div>

Если вы хотел бы отцентрировать упаковали DIV (например, изображение с подписью), вы можете использовать центр поплавка трюк с одним элементом:

http://pmob.co.uk/pob/centred-float.htm

источник

2012-06-22 10:51:59 biziclop

На данный момент я хочу только изображение в div – AgA

Текст выравнивается влево, это ожидается. Является ли изображение выравниванием по левому краю в примере jsfiddle? – biziclop

Извините, что я удалил комментарий, но я был прав - первый фрагмент не выравнивает их по центру в IE, но он находится в jsfiddle. – AgA

Эй теперь вы можете сделать это используется отображения таблицы-элементный свойства, как, как этот

Live Demohttp://jsfiddle.net/22cHK/

HTML

<div class="center"> 
<img src="http://testing.gobanana.co.uk/wp-content/uploads/2011/03/CrashTestDummy-2-8544b.jpg" > 
</div>

Css

.center{ 
text-align:center; 
    border:solid 10px red; 
    vertical-align: middle; 
    display:table-cell; 
    width:700px; 
    height:700px; 
} 
.center img{ 

}

Живая демо http://jsfiddle.net/22cHK/

источник

2012-06-22 11:13:47

, но div выравнивается в левой части, а изображение действительно находится в центре. – AgA

Вы хотите центрировать 'div', содержащий' img'? Не могли бы вы точно уточнить, что вы хотите сосредоточить? – biziclop

Эй, @AgA, вы хотите этого http: // jsfiddle.net/22cHK/2/ –

ли это будет работать,

<p style="text-align:center"> 
    <img style="position:absolute; 
    width:200px; 
    height:70px; 
    top:50%; 
    left:50%; 
    margin:-35px 0 0 -100px; 
    visibility:visible; 
    src="parliament.gif"> 
</p>

Что здесь происходит изображение левого верхнего угла позиционируется в середина p с помощью top: 50%, слева: 50%, но затем с использованием отрицательного поля смещение изображения, чтобы добраться до середины , Этот трюк работает во всех браузерах.

источник

2012-06-22 13:08:49

Как интегрировать IMG в DIV во всех браузерах

ответ

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