Inspiration For Creative Minds
Home » Labs » CSS Align – CSS Vertical Align  

Filed under Labs

The CSS vertical-align property sets the vertical alignment of an element.This property is supported by all major browsers.

.container img
{
 vertical-align:text-top;
}

Another CSS Vertical Align Example

.container img
{
 vertical-align: middle;
}

One more Example with full html and css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>CSS Vertical Align Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
	.Vertical-outer {
		display: table;
		position: relative;
		overflow: hidden;
		height:500px;
		background: #FFCC00;
		width: 100%;
	}
 
	.Vertical-middle {
		display: table-cell;
		position: absolute;
		top: 50%;
		vertical-align: middle;
	}
 
	.Vertical-inner {
		position: relative;
		top: -50%;
	}
</style>
</head>
 
<body>
 
	<div class="Vertical-outer">
	<div class="Vertical-middle">
	<div class="Vertical-inner">
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
	</div>
	</div>
	</div>
 
</body>
</html>
It's only fair to share...Share on Google+Tweet about this on TwitterShare on Facebook
Labs

Posts you may like: