align image at middle of div element

If you have an image inside a div element and you want it to be displayed exactly at the center of it then you must apply display=block, vertical-align=middle, and text-align=center to that div.

Example: We have a div with width and height as 400px with an image located within it. If you do not add any

css properties, the image will be displayed at the top-left corner of the div element.

<html>
<head>
<title>Image displayed at top-left corner of the div</title>
<style>
.my-div {

    width:400px;
    height:400px;
    border:1px dotted #888;

}
</style>
</head>
<body>

<div class="my-div">
    <img src="http://code2care.org/tools/base64-decoder-encoder/images/code2care-logo.png" />
</div>

<body>
</html>

Solution:

.my-div {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:400px;
    height:400px;
    border:1px dotted #888;
    background:#fefefe;
    border-radius:15px
}

The image is now aligned at absolute center Vertically as well as Horizontally within the div element.

Browser Support test :
Property : text-align
IE : Internet Explorer 8 or above
Firefox : version 38 or above
Chrome : version 31 or above
Safari : version 8 or above
Property : vertical-align
It is supposed by all browsers : IE6+, Firefox 2+, Chrome 1+

Property : display
IE : Internet Explorer 8 or above
Firefox : version 38 or above
Chrome : version 31 or above
Safari : version 8 or above

More Posts related to CSS,

More Posts: