I am struggling to vertically center an image on my webpage. Since I don't know the dimensions of the image beforehand, my only options are using tables
or css tables
.
Even after trying to use css tables, I still can't seem to get the image centered vertically.
This is how my HTML looks like:
<div class="image">
<div class="table">
<div class="table_row">
<div class="table_cell">
<img src="https://pbs.twimg.com/profile_images/3560817062/a9bda79c4d2bfc3353a4fbc0a14e6080.jpeg" alt="Main Image">
</div>
</div>
</div>
</div>
Here's the CSS code I have used:
.table {
display: table;
margin: 0px auto;
}
.table_row {
display: table-row;
}
.table_cell {
display: table-cell;
vertical-align: middle;
}
.image {
width: 411px;
min-width: 411px;
max-width: 411px;
height: 341px;
min-height: 341px;
max-height: 341px;
background-color: #f6f6f6;
}
.image img {
}
You can view a live demo on: http://jsfiddle.net/5DLuU/
Can anyone point out what I might be doing wrong in this setup?