Question

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

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

请注意，如果可能的话，我宁愿避免使用表格等黑客攻击，也可以随意发布这些解决方案。

另外，为什么元素不仅在底部而且还略微轻推下来？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

你可以使用新的强大的CSS flexbox ，

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

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

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

垂直居中元素时遇到问题

2 个答案: