位置: 编程技术 - 正文

讨论CSS中的各类居中方式(列举css的三种应用方式)

编辑:rootadmin

推荐整理分享讨论CSS中的各类居中方式(列举css的三种应用方式),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css有几种使用方法,列举css的三种应用方式,css简述,讨论css中的各类问题,讨论css中的各类文件,讨论css中的各类元素,讨论css中的各类问题,讨论css中的各类元素,内容如对您有帮助,希望把文章链接给更多的朋友!

今天主要谈一谈CSS中的各种居中的办法。 首先是水平居中,最简单的办法当然就是

也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果。

那么其他的办法呢?容我一一道来:

line-height

首先介绍文字的水平居中方法:

利用line-height设为height的一样即可:

效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfad.png" alt="查看图片" />

padding填充

利用padding和background-clip配合实现div的水平垂直居中:

通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿,再利用padding设为外div减去内div的差的一半,来实现:

效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfab5da.png" alt="查看图片" />

margin填充

接下来介绍margin填充的方式来实现水平垂直居中。 首先我们还是定义父子div:

<div class="parent"> <div class="children"></div></div>

这里我们利用将子div的margin-top设置为父div高度减去子div高度的一半,然后再通过overflow设置为hidden来触发父div的BFC,LESS代码如下:

最后得到居中效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfe.png" alt="查看图片" />

absolute定位

讨论CSS中的各类居中方式(列举css的三种应用方式)

利用position:absolute搭配top,left %,再将margin设为负值也可以对div进行水平垂直居中,首先还是需要定义父子div:

然后设置相应的css:

其中的margin中的值为该div宽度的一半,最后效果图:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfad.png" alt="查看图片" />

text-align居中

众所周知,text-align可以使得一个div中的内容水平居中。但是如果是要将该div中的子div居中呢?可以将子div的display设为inline-block。

图片居中

一般的图片居中都是和text-align一样,将图片包装在一个div中,将该div的text-align设为center即可。 可以参考下面的链接: 个人站点

有一种特殊的方式,利用了一个图片进行占位,以让父容器获得高宽,从而让进行-%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小,随便放张尺寸不超过父容器的图片上去都能做到居中。另外,兼容性好,IE6都是能顺利兼容的。代码如下:

效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfc2.png" alt="查看图片" />

transform居中

上面讲到的div居中的例子中,div的宽度都是固定的,然而实际项目中,有可能遇到不定宽的div,特别是响应式或者移动端的设计中,更加常见。所以下面介绍一种不需要定宽的div水平垂直居中方法。 先上代码:

效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfc3ed3.png" alt="查看图片" />

首先我们利用float,将需要居中的div的父div也就是children的宽度收缩,然后left:%,将children的左边与水平中线对齐。这个时候,还没有真正居中,我们需要将children-inner左移动-%,这样就水平居中了。 再来说说垂直方向,先将children的top设为%,然后其上边和垂直中线对齐了,同样,我们需要将children-inner上移动-%。但是这个%是计算不出来的,所以我们用到了transform : translate3d(0, -%, 0); 这个方法非常好用噢。

flex居中

最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。

效果如下:

Notice: Undefined index: CMSdown in /data/webroot/gcms/lib/Api/Open/Article.php on line img////_dfc.png" alt="查看图片" />

这种方式最为简便,就是兼容性不好,不过随着时间的前进,各大浏览器一定会都兼容的。

标签: 列举css的三种应用方式

本文链接地址:https://www.jiuchutong.com/biancheng/368728.html 转载请保留说明!

上一篇:前端获取http状态码400的返回值实例

下一篇:如何使用CSS3画出一个叮当猫(css怎么画)

  • 以房抵债的房子交房产税吗
  • 跨年度的租金收入如何入账
  • 自己房子出租发布信息
  • 工业企业结转成本表格模板
  • 以前年度损益调整在借方是什么意思
  • 个人所得税修改赡养信息
  • 新个税系统如何操作
  • 福利企业发放职工集资利息是不是要交个人所得税
  • 汇票退回会计分录怎么写
  • 租赁房屋缴纳什么税
  • 固定资产后续支出
  • 淘汰生产母猪处理销售收入的分录怎么处理?
  • 哪些营业外收入需要缴纳增值税
  • 供应商不给我们开发票,我怎么入账
  • 已认证的发票没领怎么办
  • 金税盘是固定资产还是无形资产
  • 跨境税法
  • 小规模纳税人开具增值税专用发票
  • 工程承包收入如何确定
  • 坏账损失怎么核算
  • 调整成本调整单分录
  • 什么发票可以抵成本
  • 出口退税是几个点
  • 税务机关退税
  • 内存频率调整教程图解
  • doc文档隐藏
  • 固定资产报废如何计算
  • 未开票收入如何记账
  • 把原材料给别人加工怎么入账
  • php中url什么意思
  • 记账凭证技巧
  • 债权人将长期债务转为投资
  • 生产企业外销收入账务处理
  • idea怎么运行前端vue项目
  • 税务新政策解读
  • 出租包装物和出售包装物有什么区别
  • 结转成本费用的会计分录是什么?
  • 固定资产怎么盘点最快
  • 新公司有免税政策吗
  • 金蝶软件利润表公式怎么设置
  • mysql内连接查询使用汉语作为官方语言的所有国家
  • 帝国cms移动端
  • ie8 ie8i
  • 预交的企业所得税需要计提吗?
  • 自然人独资的有限责任公司交什么税
  • 母公司吸收合并全资子公司
  • 个税申报怎样作废
  • 向客户收取服务费会计分录
  • 金税四期介绍 王石
  • 小规模未达到起征点如何结转
  • 无形资产的后续支出,金额较大的应增加无形资产的价值
  • 单位租的个人房怎么入账
  • 幼儿园收取的生活费免税吗
  • 收到员工社保
  • 预计负债是暂时性差异还是永久性差异
  • 在建工程抵押贷款的用途为在建工程继续建造所需资金
  • 单位定期存单利息如何记账
  • 对于银行已入账企业未入账的未达账项应该
  • 取得工程款发票计入什么会计科目里
  • 差旅费车票是否可以报销
  • mysql uuid分页优化
  • dos命令win10
  • windows mysql my.cnf
  • mac链接其他屏幕
  • fsav32.exe是什么进程 有什么作用 fsav32进程查询
  • 华硕和联想笔记本电脑哪个好点
  • linux服务器的mac地址怎么查
  • pavprsrv.exe - pavprsrv是什么进程 有什么用
  • win7系统c盘占用空间大
  • win7 32位无线网卡驱动
  • win7temp文件夹在哪
  • Unity3D游戏开发(第2版)
  • jquery实战
  • JQueryEasyUI之DataGrid数据显示
  • unity获取鼠标
  • javascript的dom
  • js dom操作方法
  • jquery的gt
  • 山东省地方税务局印花税核定征收管理办法
  • 江苏无锡2023年GDP
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设