学习css的时候经常被各种问题纠结到不要不要的,没办法,只能写写博客帮助整理一下自己的思绪和帮助一下和我遇到同样问题的小伙伴们
不知道各位学习css的小伙伴会不会被垂直居中的问题虐的好痛苦,反正我也被虐的挺惨
但是稍微整理一下,感觉好像垂直居中也就那么回事。
一,利用line-height
line-height是一个设置行高的一个css样式,一行文字上面的空白+下面的空白=行高
他可以帮助我们解决垂直居中的问题
当一个div中有1行文字(记住:是1行文字)需要垂直居中时,设置line-height=div的height可是使这一行文字垂直居中,但这个办法有点鸡肋,只能用在一行文字上,但是在文本框里面的光标解决上却很有用,现在的主流浏览器chrome,firefox,safari等等等在设置input=“text”时输入文字光标是会自动垂直居中的但是在老古董ie6,ie7,ie8上却会有问题,会变成这样: 很坑有木有???没办法这就是ie,这时我们加上line-height=文本框的height可以解决这个问题。
二,利用table
我们知道vertical-align分别是垂直居中,但是vertical-align只有在table中才能生效,这是我们就可以利用display来解决这个问题
→ display:table
→diaplay:table-cell /*使这两个div模仿表格和表格单元,给vertical-align提供一个使用的环境*/
我要垂直居中!!
查看更多关于css垂直居中那点事_html/css_WEB-ITnose的详细内容...