Bootstrap Vertical Center contents in row

Answer 1

Vertically centering float-based content is very problematic. There are a handful of hacks to do it (using transformations or negative bottom margins), but it is far easier to use display table or flexbox for the layout.

Change the row to flexbox like this:

.pgRow {
  background:yellow;
  display: flex;  /* make the row a flex container */
  align-items: center; /* vertically center each flex item in the container */
}

Be sure to remove the height from the .va! Generally, you should not set heights on containers in CSS; doing so will only introduce a load of other problems.

For more options, check out http://howtocenterincss.com/. To get a handle on flexbox, check out this article on CSS Tricks. To really get a handle on all these things and how they work together (shameless plug alert), checkout my book.