垂直居中元素时遇到问题

时间:2015-03-29 16:46:13

标签: html css cross-browser vertical-alignment

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 r u alrite m8 i think u r weak m8</span>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

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

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

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