css水平居中

水平居中在网页前端设置是最常见的

最常见的方法

1.对于固定宽度的父标签可用margin 或 padding调整距离 使之居中

这种方法使用时有条件的,开发应用偶尔能用得上,但是对于父标签宽度不固定的 就无法使用该方法,例如父标签是<body>

2.margin:0 auto 或者 margin-left:auto;margin-right:auto;

这个方法解决了上面的局限,在开发中经常使用该方法水平居中,需要注意加文档<!DOCTYPE>声明生效

3.text-align:center 属性规定元素中的文本的水平对齐方式

注意 :第一点:是指标签内容水平居中 第二点 标签是行内元素该属性text-align才生效,有时候为了达到条件 会配合使用diplay:inline-block使用

标签table下的td经常使用该属性

4.background-position:center 只有在图片水平居中的情况下 可以考虑该方法

5.定位居中 本博客在css垂直居中文章介绍了该方法


还有很多其他方法可以实现水平居中但是需要注意属性兼容性问题 ,

上面介绍的属性都是兼容任何一个浏览器,注意他们的使用条件 

在开发中灵活使用这5种方法足够解决水平居中的问题,css最难的是垂直居中

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值