CSS Align – CSS Vertical Align

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:

Related posts:

Partner with Us

We are providing an exclusive partnership offer to individuals and companies who are interested in setting up their own web design & development company. For more information about how to partner with us, please contact us