html居中问题

1、块元素水平居中:

-左=自动;-右=自动;

2、浮动块元素水平居中:

外包装块 “float:left;:;left:50%”;

内部块“浮动:左;:;右:50%”

3、中心内容:

内联元素:文本对齐:;-对齐:

块元素:

:表格单元格;-对齐:;

如果是单行内容:line-=

4、绝对定位的元素垂直和水平居中:

方法一:

.{

宽度:600px;:400像素;

: ; 左:50%;最高:50%;

-顶部:-200px;/* 一半高度 */

-左:-300像素;/* 宽度的一半*/

}

不过这种方法的优点是兼容性更好,缺点是需要提前知道元素的大小,否则负值的调整不能准确。此时,往往是借助 JS 来获取的。

方法二:使用 CSS3

随着 CSS3 的兴起,有一个更好的解决方案,就是使用代替。偏移量的百分比值是相对于自身大小的,不需要提前知道元素的大小,横向和纵向都显示在中心。但是这种方法不兼容。

.{

宽度:600px;:400像素;

: ; 左:50%;最高:50%;

: (-50%, -50%);/*前50%是宽度的一半,后50%是宽度的一半*/

}

方法三:上下左右0位置定位+“:auto”(推荐练习!)

.{

宽度:600px;:400像素;

: ; 左:0;顶部:0;右:0;: 0;

: 汽车; /* 水平和垂直居中 */

}

如果只设置“-left:auto”+“-right:auto”,只会水平居中;

如果只设置“-top:auto”+“-:auto”,则只会垂直居中;

表格居中问题:

1、外面一层

但它只能水平居中,不能垂直居中

2、外面一层

同上

© 版权声明
THE END
喜欢就支持一下吧
点赞205 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片