Centre image within div
Centre an image horizontally and/or vertically within a containing DIV even if you don’t know the image size.
Recently I needed a solution whereby the image was centred horizontally and vertically within its containing DIV. Seems straight forward until you bring IE into the mix of things. The main problem is if you have an image which is not always a set width/height i.e. a dynamically generated image. Anyway, here you have it a solution that works in all browsers and validates.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centre image in containing DIV | Dare to Think</title>
<style type="text/css">
.pic-container {
height: 100px;
width: 100px;
margin-bottom: 20px;
}
.pic-container .pic {
width: 100px;
height: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: #000;
}
.pic-container .pic * {
vertical-align: middle;
}
-->
</style>
<!--[if lte IE 7]>
<style type="text/css">
.pic span {
display: inline-block;
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div class="pic-container">
<div class="pic"><span></span><img src="http://placehold.it/50x100" alt="" width="50" height="100"/></div>
</div>
<div class="pic-container">
<div class="pic"><span></span><img src="http://placehold.it/100x50" alt="" width="100" height="50"/></div>
</div>
<div class="pic-container">
<div class="pic"><span></span><img src="http://placehold.it/50x50" alt="" width="50" height="50"/></div>
</div>
</body>
</html>-
HTML email signature in Apple Mail
Step by step guide on how to add an HTML signature to Apple Mail.
-
Secure your WordPress Blog
A guide to securing your WordPress website.
-
Remove the shadow from Mac Screen Grabs
How to remove the shadow from Apple Screengrabs.
-
10 Useful Sites for Web Developers
Some useful websites for web developers.
-
3 FREE Apps to protect your PC
A few free apps to help you protect your PC.
-
Web Browsing Tips #1: Find in Page
Find copy in page in a web page.
-
Web Browsing Tips #2: Tabbed Windows
Using tabbed windows in your web browser.
-
Web Browsing Tips #3: Keyboard Shortcuts
Some web browsing keyboard shortcuts.
-
Redirect your site the Search Engine Friendly way
Using a 301 redirect is important when you change your website URL or web page URL.
-
Remove the WordPress Meta Tag from your Blog
Remove the WordPress meta tag from your WordPress site with this small function.
-
Stay secure, use more than one password
We need passwords for everything, but how can we stay secure and have multiple passwords without having to remember them all.
-
Forward your emails to one address
Find out how, using cPanel, you can forward your emails to one email address.