Home » Labs » CSS Align – CSS Vertical Align  

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>
Tags:

Posts you may like: