垂直居中放置元素時遇到麻煩

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/