Center Content inside a Container using css
by Sasikumar[ Edit ] 2014-03-22 10:23:47
To center a content inside a container using css :
By adding this class we can align a content both vertically and horizontally inside a container
<html>
<head>
<title>Center a content inside a Container</title>
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 600px;
height: 300px;
border:1px solid red;
}
.wraptocenter * {
vertical-align: middle;
}
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
</head>
<body>
<h1>Center a content inside a Container</h1>
<div class="wraptocenter"><span></span><img src="http://hiox.org/images/logo.png" alt="hioxscraplogo"></div>
</body>
</html>
