垂直居中放置元素时遇到麻烦

Question

https://jsfiddle.net/93hjyhs8/

我试图使文本在右侧垂直居中，但是很难找到一种适用于所有浏览器的纯CSS解决方案。

.block元素的高度应该是动态的，并扩展到最高子元素（当前为.thing1）的大小。

请注意，如果可能的话，我宁愿避免使用表之类的骇客行为，但无论如何都可以发布此类解决方案。

另外，为什么元素不仅在底部而且略微向下移动？

 .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

演示-https: //jsfiddle.net/victor_007/93hjyhs8/1/

为两个inline-block元素添加vertical-align:middle

Answer 2

您可以使用新的超赞CSS Flexbox ，

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

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

演示： https : //jsfiddle.net/3y41ot0b/