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
More Posts related to Css,
- CSS: Apply opacity only for div background and not text
- 32 css cursors web developers must know
- How to place two div elements next to each other
- reCAPTCHA Implementation Tutorial
- align image at middle of div element
- Add scroll to div element in HTML Css
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to make jsfiddle bootstrap ready
- How to Center Align Image in Bootstrap
- Horizontally Center Align tag in HTML using CSS
- How to make div or text in html unselectable using CSS
More Posts:- Android : Connection with adb was interrupted 0 attempts have been made to reconnect - Android
- INVALID FILE NAME: MUST CONTAIN ONLY [a-z0-9_.] Android Eclipse Error - Eclipse
- Failed to find provider info for com.facebook.katana.provider.PlatformProvider - Android
- Align html element at the center of page vertically and horizontally - Html
- Android Disable EditText from Auto Focus on Activity load - Android
- How to Convert CSV file to SQL Script using Notepad++ - NotepadPlusPlus
- How to create StackOverflow error in java - Java
- Location of eclipse.ini file on Mac OS X - Mac-OS-X
- List of jar files for Jax-ws (SOAP) based Java Web Services - Java
- JSON Schema Validator Libraries: JSON Tutorial - Json-Tutorial
- List of Java versions - Java
- Static IP MTNL available at Rs. 200 per month - HowTos
- SharePoint Server 2016 IT Preview - new improved Features and Enhancements - SharePoint
- How to export bookmarks from Google Chrome Browser - Chrome
- Fetch as Google Crawl Error or Redirected Status - Google