写出尽可能多的水平垂直居中的方案并对比它们的优缺点_第1页
免费预览已结束，剩余1页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、写出尽可能多的水平垂直居中的方案并对比它们的优缺点行内元素水平居中：首先看它的父元素是不是块级元素，假如是，则挺直给父元素设置 text-align: center;假如不是，则先将其父元素设置为块级元素，再给父元素设置 text-align: center;块级元素水平居中(定宽度)：1）需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）2) 首先设置父元素为相对定位，再设置子元素为肯定定位，设置子元素的left:50%，即让子元素的左上角水平居中；设置肯定子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translate

2、x(-50%);块级元素水平居中(不宽度)：1) 默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;2) 首先设置父元素为相对定位，再设置子元素为肯定定位，设置子元素的left:50%，即让子元素的左上角水平居中；利用css3新增属性transform: translatex(-50%);用法flexbox布局实现水平居中（宽度定不定都可以）:用法flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: fl

3、ex; justify-content: center;单行的行内元素垂直居中:只需要设置单行行内元素的"行高等于盒子的高"即可；多行的行内元素垂直居中:用法给父元素设置display:table-cell;和vertical-align: middle;属即可；块级元素垂直居中办法一：用法定位首先设置父元素为相对定位，再设置子元素为肯定定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；定高度：设置肯定子元素的 margin-top: -元素高度的一半px; 或者设置transform: translatey(-50%);不定高度：利用css3新增属性transform: translatey(-50%);块级元素垂直居中办法二：用法flexbox布局实现（高度定不定都可以）用法flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;水平垂直居中-已知高度和宽度的元素：办法一：设置父元素为相对定位，给子元素设置肯定定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;办法二：设置父元素为相对定位，给子元素设置肯定定位，left: 50%; top: 50%;

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论