How to Set Vertical Align Middle to Div by CSS in HTM?
If you want to set vertical align middle text, image, div etc then you can set easily by using following example. you can give vertical align middle by saveral way. i also give you example with output. you use any of the example of vertical align middle by css. I also provide saveral example with difference css so you can easily find your solution.
Example 1
In this example you can set vertical align middle using display:table and display:table-cell property of css.
Table-cell
<html>
<head>
<title></title>
<style type="text/css">
body {
padding: 50px;
}
.outter {
width: 500px;background:green;color:white;height: 150px;border:1px solid red;display: table;
}
.main-content1 {
display: table-cell; vertical-align: middle;
}
.sub-content1 {
border:1px solid green; width: 50px; height: 50px; margin: auto;
}
</style>
</head>
<body>
<div class="outter">
<div class="main-content1">
<div class="sub-content1">
<p>Table-cell</p>
</div>
</div>
</div>
</body>
</html>
Try This......
