经验技巧:网页文字在div中垂直居中的问题

技巧|网页|问题

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,用得比较少,就不多讲了.

时间: 2024-09-17 04:47:46

经验技巧:网页文字在div中垂直居中的问题的相关文章

常用技巧:网页文字在div中垂直居中的问题

技巧|网页|问题 1.单行文字 设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏. 这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一行,而且IE中不支持< img >等的居中,之所以要用 overflow: hidden ,是因为当用户放大字体时,字会超出div的范围. div{ height: 20px; line-height: 20px; o

网页文字在DIV+CSS布局中垂直居中的问题

css|网页|问题 1.单行文字 设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏. 这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一行,而且IE中不支持< img >等的居中,之所以要用 overflow: hidden ,是因为当用户放大字体时,字会超出div的范围. div{ height: 20px; line-height: 20px;

DHTML技巧--网页文字选取

dhtml|技巧|网页|dhtml|技巧 请参考以下代码: <SCRIPT language=javascript>function select(){ var rng = testInput.createTextRange();<FONT color=#006400> //先要建立一个TextRangle物件,BODY,BUTTON,TEXTAREA,INPUT均包含此方法 rng.moveStart("character",0); //设置选取开始位置 rn

文字或图片元素在DIV中垂直居中_CSS/HTML

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=

如何使文本在DIV中垂直居中

 HTML代码<html><head><style>body{TEXT-ALIGN: center;}#center{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto;height:200px;background:#F00;width:400px;vertical-align:middle;line-height:200px;}</style></head><body><div id="ce

CSS position实现DIV浏览器垂直居中布局

例子  代码如下 复制代码 position:absolute;width:200px;height:200px;left:50%;top:50%;margin-left:-100px;margin-top:-100px POSITION用绝对定位是脱离文档流,,针对浏览器, DIV左上角顶点距浏览器左边整个浏览器宽度的一半即50% DIV左上角顶点距浏览器顶部整个浏览器高度的一半即50% 现在DIV左上角顶点在浏览器的中心位置,然后设置margin-left 往左边浏览器DIV的一半,再设置m

文字溢出实现溢出的部分再放入一个新生成的div中具体代码_javascript技巧

看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的div中, 想了一下原理,就是判断是否能在div里放下,如果不能,则在应该断开的地方,差入到新的div中,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

JS+CSS设置img在DIV中只显示Img垂直居中的部分_javascript技巧

一个Div中显示Img,img的宽和Div相同,但高不固定,要求只显示Img垂直居中的部分. 示例:   原图: 代码实现: 复制代码 代码如下: <div style="width: 190px; height: 100px; overflow: hidden;"> <img src="http://beijing.timeoutcn.com/UserFiles/Images/2013-10-21/20131021104840077cover-22-1.j

网页设计原则理念以及实战经验技巧

什么是好的网页设计,网页设计原则理念 (1)内容和功能决定表现形式和界面设计 常常有人凭借电话的几句交流或者QQ上的几句聊天,甚至是一张句话的小纸条,就开始做一个网站设计.我决的这都是敷衍了事的通用设计,很不专业不成熟的设计.做一个良好的网页设计,你需要了解客户的东西很多,比如: 1.建站目的(是主推产品还是平品牌,是主要注重SEO还是用户交互等) 2.网站类型 3.栏目规划及每个栏目的表现形式及功能要求 4.主色调.客户性别喜好.联系方式.旧版网址.偏好网址 5.根据行业和客户要求,那些要着重