Menu
I am loading image on iOS device. I want my image to be centered horizontally as well vertically center with all screens and orientation . I have tried it using table and td , It is aligning horizontally center but not aligning vertically middle . This is what I have tried html:
<table width=100% height=100%> <tr> <td style="text-align: center; vertical-align: middle;"> <img src="" /> </td> </tr> </table> css:
html, body { height: 100%; } 
461
In order to center an image in HTML either use the text-align property or the margin-right and margin-left property.
An <img> element is an inline element (display value of inline-block ). It can be easily centered by adding the text-align: center; CSS property to the parent element that contains it. To center an image using text-align: center; you must place the <img> inside of a block-level element such as a div .
To center an image, we have to set the value of margin-left and margin-right to auto and make it a block element by using the display: block; property. If the image is in the div element, then we can use the text-align: center; property for aligning the image to center in the div.
The <center> tag was used in HTML4 to center-align text.
Instead of Table, You can achieve the same with div and img
Working Demo
HTML
<div><img src="http://placehold.it/350x150"></div> CSS
html, body { height: 100%; margin:0; padding:0; } div { position:relative; height: 100%; width:100%; } div img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
