All geek questions in one place

Center image inside div?

I have an image inside a div like

<div><img /><div>

The image is dynamically not fixed size. The size of the div is 200px by 200px . Image size unknown in advance. If the image size is larger than 190px by 190px , set it to 190px by 190px (i.e. max-width:190px , max-height:190px ). How can I center the image to meet these needs? I need a solution that works in Internet Explorer 7 too.

The solution here and here cannot be applied to my problem, because

  • Not sure if the image will be less than 200 pixels.

  • I also want horizontal alignment.

  • No support for Internet Explorer 7.

(Some questions were asked in Qaru regarding the same, but my script is different, so they are not applicable for this specific problem.)

+6
source share
4 answers

The solution is to change the div to a table. As a rule, you should not use tables for positioning, but when it comes to old non-standard browsers, sometimes this is the only choice. Demo here . For recording, this also works in Internet Explorer 6.

the code:

CSS

 #theDiv { width: 200px; height: 200px; text-align: center; vertical-align: middle; } #theImg { max-width: 190px; max-height: 190px; }​

HTML

 <table id="theDiv" style="border: solid 1px #000"> <tr> <td> <img id="theImg" src="http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg" /> </td> </tr> </table>

Here's an update that uses CSS instead of changing the markup to the actual table:

 #theDiv { display: table; width: 200px; height: 200px; text-align: center; vertical-align: middle; } #theImg { max-width: 190px; max-height: 190px; } .tr { display: table-row; } .td { display: table-cell; vertical-align: middle; } <div id="theDiv" style="border: solid 1px #000"> <div class="tr"> <div class="td"> <img id="theImg" src="http://lorempixel.com/100/100/" /> </div> </div> </div>
+5
source

See this script: http://jsfiddle.net/ANwmv/

Centering solution as suggested at: http://www.brunildo.org/test/img_center.html

 <style type="text/css"> .wraptocenter { display: table-cell; text-align: center; vertical-align: middle; width: 200px; height: 200px; border: 1px solid red; } .wraptocenter img { max-width: 190px; max-height: 190px; } .wraptocenter * { vertical-align: middle; } /*\*//*/ .wraptocenter { display: block; } .wraptocenter span { display: inline-block; height: 100%; width: 1px; } /**/ </style> <!--[if lt IE 8]><style> .wraptocenter span { display: inline-block; height: 100%; } </style><![endif]-->

HTML:

 <div class="wraptocenter"><span></span><img src="http://lorempixel.com/100/100" alt="..."></div>
+2
source

Give the parent the line height equivalent to its own height and the center text-align property. Give the image the vertical alignment property of the middle to center it within its line height:

HTML:

  <html> <body> <div> <img src="http://www.waleoyediran.com/wp-content/uploads/2011/04/stackoverflow.png"/> </div> </body> </html>

CSS

 div, img { border: 1px solid black; } div { width: 200px; height: 200px; text-align: center; line-height: 200px; } img { max-width: 190px; max-height: 190px; vertical-align: middle; }

JS script example

0
source

You can do it:

 <div style="text-align:center;vertical-align:middle;"> <img style="margin:0 auto" /> </div>
-1
source

Source: https://habr.com/ru/post/919444/

More articles:


All Articles