将内嵌块与较高的内嵌块垂直对齐

Question

I want to vertically align the image .b so that it's in the center of the text (vertically).

I think I understand vertical-align, and it does not help me because it aligns according to the baseline of .b, which is near the bottom of the #container.

What is the correct practice to do so? I would like to avoid setting a margin from the top. I basically want to align according to the parent container height and not the baseline, is it possible/right?

codepen: http://codepen.io/Vall3y/pen/vEONaJ

html:

<div id='container'>
  <div class="a"></div>
  <div class="b">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text
  </div>
</div>

css:

#container {  
  width: 100px;
  font-size: 0;  
}

#container > div {
  display: inline-block;
}

.a {  
  width: 30px;
  height: 30px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  background-image:  url(http://upload.wikimedia.org/wikipedia/en/f/f4/Free_Blue_Star.jpg)
}

.b {
  width: 70px;
  font-size: 14px;
}

Answer 1

Just put vertical-align: middle; on both .a and .b and that will work.

you could of course just give .ba padding and a background image with a background position of left center while removing .a