关于垂直居中其中一种方法(inline-block)的疑问点

Manji
  • 184

引:

http://demo.doyoe.com/css/alignment/

上面提及一种垂直居中的方法

`.wrap {width:500px;height:300px;border:1px solid #ccc;}

.wrap:after {display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}

.inner {display:inline-block;vertical-align:middle;}`

完美,真的垂直居中了,当设置.inner宽度为100%,或者.inner中的文字长到足以换行时,垂直居中失效了,设置宽度99%又能垂直居中。

问题:

失效这一过程是怎么出现的?


抱歉,这个问题不该出现,但由于我没仔细看完全文......

文章提到了问题所在

  • 其实如果理解了line box概念,写上述2个例子时,就肯定知道会存在这个杯具。如上,CSS不变,只将文本变长。之前得以实现垂直居中,主要是将文本所在line box撑高了,而如果新增的元素被过长文本挤换行,则它们将不再处于同一line box,那么垂直居中将失效。你可能存疑,不是已将新增元素width设置为0了吗?怎么还能被挤换行。这时你应该知道一个常识,inline level或inline-block level的元素之间的间隙问题,对此问题不做详述,看看 @一丝 的这篇文章 inline-block 前世今生,应该能有个理性的认知。

行内元素之间存在空隙,原因就是这点。

文章也给出了解决方案:

wrap 设置 font-size:0;

inner 设置 font-size:Npx

回复
阅读 8.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏