hemtros
1/27/2017 - 3:22 PM
Different ways to vertical align element in HTML/CSS
Different ways to vertical align element in HTML/CSS
<html>
<head>
<style>
.parent{
height: 200px;
background-color: mediumaquamarine;
text-align: center;
}
.child{
background-color: bisque;
line-height: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">test</div>
</div>
</body>
</html><html>
<head>
<style>
.topparent {
width: 300px;
}
.parent {
text-align: left;
height: 56px;
width: 300px;
background-color: pink;
white-space: nowrap;
font-size: 0;
text-align: center;
/* remove the gap between inline level elements */
}
.dummy-child {
height: 100%;
border: 2px solid red;
}
.valign {
font-size: 16px;
/* re-set the font-size */
}
.dummy-child,
.valign {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="topparent">
<div class="parent">
<div class="dummy-child"></div>
<div class="valign" style="background-color: lightblue;">test</div>
</div>
</div>
</body>
</html><html>
<head>
<style>
.parent{
height: 200px;
background-color: mediumaquamarine;
display: flex;
justify-content: center;
}
.child{
background-color: bisque;
align-self: center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">test</div>
</div>
</body>
</html><html>
<head>
<style>
.parent{
height: 200px;
background-color: mediumaquamarine;
display: table;
width: 100%;
text-align:center;
}
.child{
background-color: bisque;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">test</div>
</div>
</body>
</html>