HTML之垂直居中问题
今天遇到一个垂直居中的问题,调试了一个多小时,终于找到一个解决办法,虽然不够完美,但是能解决当前问题,现来总结一下居中的一些常见问题:
- 表格居中:这个最好解决,直接调用现成的CSS Style - vertical-align: middle
- DIV居中:这个就挺麻烦,因为现成的CSS Style对DIV无效,所以只能想一些办法来实现这种效果:
- 如果是单行文字垂直居中,那最好的解决方案是定义DIV的inline-height和height为相同的值(也就是DIV的高度),这样就居中了;
- 利用padding设置垂直居中,我们知道padding是内边距,如果设置内边距上下相等,那么DIV不就居中了;
- 万能方法:这个方案适用于所有的页面元素,首先自己计算好元素占用了多少个像素和元素距离border-top的距离,直接更改padding-top的值为你计算的距离,这样元素就垂直居中了。虽然有点投机取巧,但是能实现效果也不失为一种解决方案!
- 定义三个DIV,相互嵌套,如下图最终想要居中的元素居中了,CSS为:
![]() |
|
- 因为我要居中的元素是ul里面的li要垂直居中,所以只能用方法3了,以后如果有更好的方法,接着更新!
路慢慢其休远羲,吾将上下而求所