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
Advertisements
Try Out Code2care Dev Tools:

Advertisements



#Android #Java #Linux #Microsoft #Google #Python #MacOS #Notepad++ #Microsoft Teams #CSS #PHP #SharePoint #Html #Linux #C-Program #Bootstrap #jQuery #Sublime #Android-Studio #Facebook #Eclipse #WhatsApp #News #MySQL #Json #HowTos #JavaScript #FTP #S3


Advertisements


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Tutorials, Trouble-Shooting steps, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.
🎉 We are celebrating the 10th years of Code2care! Thank you for all your support! We hope we made a difference.
We strong support Gender Equality & Diversity.

We stand in solidarity with Ukraine - Make a donation to UNHCR - https://donate.unhcr.org/in/en-in/ukraine-emergency