vertically center image in div

Posted: April 16, 2014 in PHP

<!doctype html>
<html lang="en">
<head>
</head>
<body>
<style>
.cover{ float:left; margin: 10px;}
.box
{
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
background:D6D6D6;
border: 1px solid grey;
display:table-cell;
}
.container
{
vertical-align: middle;
}
.container img
{
max-height: 100px;
max-width: 100px;
}
</style>
<div class="cover">
<div class="box">
<div class="container">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRjWxCr7_t7KoK_WSe3UDeucvuaiyddKqk4FfqNOxUAyC0AbVRO" >
</div>
</div>
</div>
<div class="cover">
<div class="box">
<div class="container">
<img src="http://wallpaper.pickywallpapers.com/htc-hd7/preview/red-bull-logo.jpg" >
</div>
</div>
</div>
<div class="cover">
<div class="box">
<div class="container">
<img src="http://www.hdwpapers.com/thumbs/batman_logo_wallpaper_2-t2.jpg" >
</div>
</div>
</div>
<div class="cover">
<div class="box">
<div class="container">
<img src="http://wallpaper.pickywallpapers.com/lg-dare/preview/big-android-logo-on-a-blue-background.jpg" >
</div>
</div>
</div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s