Vertical middle with table-cell

Question

I'm trying to centering my paragraph with table, table-cell and vertical-align. For some reason, it doesn't work. Check my code please.

html

 <div class="a"> <img src="http://dummyimage.com/600x400/000/fff" alt=""> <div class="b"> <p>sdfsdfsdfsdfsdfs</p> </div> </div> 

css

 .a { display: block; float: left; height: 100%; min-height: 1px; width: 334px; background: red; } .a > * { float: left; } 

Answer 1

Edited Fiddle http://jsfiddle.net/k73xfayx/ here

The outer element has to have display: table , the inner ones table-cell

I put another DIV around your img (class c) to get that structure: One surrounding DIV (a), two DIVs inside that (c and b), one of them containing the img, one a p-Tag with text.

Answer 2

Your code does not seem to include any < table > tag at all. I am sorry if I have misinterpreted your question.

If you have changed it, then could you please edit your question and post your code's previous version in it. This will help people having a similar question.

This is what I currently see:

<div class="a">
  <img src="http://dummyimage.com/600x400/000/fff" alt="">
  <div class="b">
    <p>sdfsdfsdfsdfsdfs</p>
  </div>
</div>

Styling:

.a {
  display: block;
  float: left;
  height: 100%;
  min-height: 1px;
  width: 334px;
  background: red;
}

.a > * {
  float: left;
}