网页文字在div中垂直居中代码,Css代码库,德仔网

代码语言

代码分类

【Css】网页文字在div中垂直居中

作者:Dezai.CN / 发布于2013/2/28/ 1107


	1.单行文字
	设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏.
	这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一行,而且IE中不支持< img >等的居中,之所以要用 overflow: hidden ,是因为当用户放大字体时,字会超出div的范围.
	div{
	height: 20px;
	line-height: 20px;
	overflow: hidden;
	}
	2.多行文字
	很简单,只要设定一样的 padding-bottom 和 padding-top 就可以了
	div{
	padding-top: 20px;
	padding-bottom: 20px;
	}
	这种方法同时支持块级和内联极元素以及非文本内容,包括图片等等,也支持所有浏览器,不足的就是不能固定高度
	现在比较好用的就着两种方法了,当然还可以利用浏览器的CSS hack,用得比较少,就不多讲了.

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　网页文字　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)