Question

I’ve tried to use display: table in the parent div and display: table-cell in the child div as seen here but I can’t seem to get the image vertically aligned. What am I doing wrong?

Here is my code:

HTML:

<div class="body_splash">
<img src="https://upload.wikimedia.org/wikipedia/
commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/> 
</div>​

CSS:

.body_splash {
    width: 378px;
    float: left;
    display:table;
    height: 400px;
    background-color: #eaeaea;
}
.body_splash img {
    display: table-cell;
    vertical-align: middle;
}​

Thanks in advance.

Answer 1

Try DEMO

<div class="table">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Cc.logo.circle.svg/64px-Cc.logo.circle.svg.png"/> 
  </div>
</div>​

.table {
  display: table;
  float: left;
  width: 378px;
  height: 400px;
  background-color: #eaeaea;
}

.table > div {
    display: table-cell;
    vertical-align: middle;
}​