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 anycss 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
- How to make jsfiddle bootstrap ready
- How to place two div elements next to each other
- List of 32 CSS cursors web developers must know about
- How to create a circular Image using pure CSS Code
- How to set CSS background-Image Property
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Only Chessboard using HTML and CSS Code Example
- Set Falling Show on Website for Christmas using Pure CSS Code
- Horizontally Center Align
- How to Center Align Image in Bootstrap
- align image at middle of div element
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- reCAPTCHA Implementation Tutorial
- Add scroll to div element in HTML Css
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- [Fixed] Git Clone git@github.com: Permission denied (publickey) Could not read from remote repository Fatal error - Git
- How to check if Key Exists in Python Dictionary? - Python
- Open Large File in Notepad++ (Fix: File is too big to be opened by Notepad++) - NotepadPlusPlus
- SharePoint update append Required Field to display name of mandatory columns - SharePoint
- [Fix] Java - Exception in thread main java.lang.IllegalThreadStateException - Java
- How to install wget on macOS - MacOS
- Fix: hibernate.InstantiationException: No default constructor for entity: User - Java
- [Event Log] Android Studio performance could be improved - Android-Studio