Having trouble vertically centering an element

Question

https://jsfiddle.net/93hjyhs8/

I'm trying to vertically center the text on the right, but having great difficulty finding a pure CSS solution that works in all browsers.

The height of the .block element should be dynamic and expand to the size of the tallest child element (currently .thing1).

Note, that if possible I would prefer to avoid hacks such as using tables, but feel free to post those kind of solutions regardless.

Also, why is the element not only at the bottom but also slightly nudged down?

 .block { width: 500px; background: yellow; } .thing1 { height: 100px; width: 40%; background: blue; display: inline-block; } .thing2 { background: red; width: 60%; vertical-align: top; display: inline-block; } 

 <div class='block'> <span class='thing1'></span><span class='thing2'>Hello world how are you today ru alrite m8 i think ur weak m8</span> </div> 

Answer 1

demo - https://jsfiddle.net/victor_007/93hjyhs8/1/

add vertical-align:middle for both the inline-block elements

Answer 2

You could use the new awesome css flexbox ,

.block {
  width: 500px;
  background: yellow;

  display: flex;
  align-items: center;
  justify-content: center;
}

Demo: https://jsfiddle.net/3y41ot0b/