Another way to center an image vertically without using flexbox is by using the position property along with top, bottom, left, and right properties. <style> .container { position: relative; height: 100vh; border: 1px solid red; } img { position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } </style> <div class="container"> <img src="https://app.3schools.in/logo.jpg" height="40" width="40" alt="Centered Image"> </div>
Center an image vertically using the display: table-cell. <style> .container { display: table; width: 100%; height: 100vh; text-align: center; } .container div { display: table-cell; vertical-align: middle; } img { max-width: 100%; max-height: 100%; display: inline-block; } </style> <div class="container"> <div> <img src="https://app.3schools.in/logo.jpg" height="40" width="40" alt="Centered Image"> </div> </div> [1] The .container class uses display: table; to create a table-like layout. [2] The inner div within the container has display: table-cell; and vertical-align: middle; to vertically center its content. [3] The img tag is set to display: inline-block; to allow it to be centered vertically within the table cell.
Anonymous
2022-08-07T12:24:47+05:30
vertical-align not working in table cell
John
2022-08-07T12:24:47+05:30
To vertically align content within a <div>, you can use other techniques such as: <style> .container { display: flex; align-items: center; } </style>
You may like these posts :
<style>
.container {
position: relative;
height: 100vh;
border: 1px solid red;
}
img {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
</style>
<div class="container">
<img src="https://app.3schools.in/logo.jpg" height="40" width="40" alt="Centered Image">
</div>
<style>
.container {
display: table;
width: 100%;
height: 100vh;
text-align: center;
}
.container div {
display: table-cell;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
display: inline-block;
}
</style>
<div class="container">
<div>
<img src="https://app.3schools.in/logo.jpg" height="40" width="40" alt="Centered Image">
</div>
</div>
[1] The .container class uses display: table; to create a table-like layout.
[2] The inner div within the container has display: table-cell; and vertical-align: middle; to vertically center its content.
[3] The img tag is set to display: inline-block; to allow it to be centered vertically within the table cell.
<style>
.container {
display: flex;
align-items: center;
}
</style>
<style>
.container {
display: table-cell;
vertical-align: middle;
}
</style>
<style>
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
_________