css中关于div中文本垂直居中的问题。
面试几次下来,问的最多的问题就是水平居中问题,现在总结一下css的水平居中问题:vertical-align,在div中设置文本垂直居中,是不起作用的。那怎么样设置div的文本垂直居中?
1、单行文本垂直居中:
方法:把文本段落高度(line-height)和所在区域层的高度(height)设为一致即可。
缺点:这种方法只对单行文本有效。
这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。更多CSS教
程。
1 2 3 | 代码: div { < br > height:25px; < br > line-height:25px; < br > overflow:hidden; < br > } < br > |
2、多行文本垂直居中:
方法: 不设区域高度(让高度自适应), 然后在区域上下位置使用相同的填充控制,即使用padding属性。
缺点:对固定高度的区间无效。
如果一段内容,它的高度是可变的那么我们就可以使用就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<div>完全填充的一种访求而已。
代码:
1 | div { < br > padding:25px; < br >} |
3、浏览器居中:
方法: 设置position属性为绝对(absolute), 然后把在上方留下浏览器高度一半减去文本区域高度一半的距离,例如文本区域高度为浏览器高度的20%,那么上方应该留下50%-10%=40%;同理,在左边留下浏览器宽度一半减去文本区域宽度一半的距离。
缺点:这种方法只是让文本在落在浏览器中央,而并非在某个特定区域的中间。
代码:
<div style="position:absolute; top:40%; left:40%; width:20%; height:20%">
...............................................................................
</div>
4、多行文本固定高度的居中(考虑了浏览器兼容问题)。具体细节:http://www.cnblogs.com/dearxinli/p/3865099.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <! 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 > < title > 多行文字实现垂直居中 </ title > < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < style type="text/css"> body { font-size:12px;font-family:tahoma;} div#outer { display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden; } div#middle { vertical-align:middle; display:table-cell; _position:absolute; _top:50%; } div#inner { _position:relative; _top:-50%; } </ style > </ head > < body > < div id="outer"> < div id="middle"> < div id="inner"> < center >现在我们要使这段文字垂直居中显示! </ center > </ div > </ div > </ div > </ body > </ html > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步