居中：是子元素相对于在父元素里面居中。父子宽度都固定。

A：水平居中：

①给子元素设置一个宽度后。在给其水平方向的margin设置auto，子元素会在父元素水平方向的剩余空间，左右两边平均分配，也就左右对齐了。

B进行定位居中：

给子元素进行position：absolute，让其子元素的宽高为父元素的一半（eg：子元素left:50%,top:50%）；同时给其父元素位置设置为relative。 同时再减去子元素的宽高的一半 （百分比，子元素的宽高为父元素的50%）

C：用display方式居中

D：text-align居中：

父元素设置text-align;center；子元素设置为inline-block。

注:子元素不要设置为行盒inline，因为行盒的非可替换元素（文本类）宽高需要内容撑起来，设置宽高不占尺寸

css 居中 父子元素的更多相关文章

  1. 在css中使用hover来控制其他元素的样式，该两个元素必须是父子元素

    .col-3:hover .check-box { display: block; } 在css中使用hover来控制其他元素的样式,该两个元素必须是父子元素!!!!

  2. css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）

    css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...

  3. css使子元素在父元素居中的各种方法

    html结构: <div class="parent"> <div class="child"></div> </di ...

  4. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  5. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  6. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  7. css居中解决方案

    水平居中 行内或者具有行内元素性质的元素(比如文字或者链接)? 让一个父元素为块级元素的行内元素水平居中,可以:CSS: 1 2 3 .center-children { text-align: ce ...

  8. CSS 居中方法集锦

    记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line-height 1.4 p ...

  9. css居中完全指南(翻译)

    最近参加了百度的前端技术学院,任务4是要求一个元素在父元素中水平和垂直居中,提供的一篇文章对各种情况都进行了分析,很不错,英文也不是那么难懂,毕竟代码还是主体,翻译过来分享出来,翻译内容带有自己的理解 ...

随机推荐

  1. Linux 服务器远程管理

    一.Linux 常用远程管理工具 点击下载 二.查看服务器 ip 地址命令 1.通过 ip addr 查看网卡 ip 地址 ip addr 2.通过 ifconfig 查看网卡 ip 地址 最小化安装 ...

  2. ISO/IEC 9899:2011 条款6.8.2——标签语句

    6.8.2 复合语句 语法 1.compound-statement: {    block-item-listopt    } block-item-list: block-item block-i ...

  3. Python3基础 全局变量 在函数内可使用，不可直接修改

             Python : 3.7.3          OS : Ubuntu 18.04.2 LTS         IDE : pycharm-community-2019.1.3    ...

  4. python flask框架学习(一)——准备工作和环境配置与安装

    Flask装备: 学习自:知了课堂Python Flask框架——全栈开发 1.Python版本:3.6 2.Pycharm软件: 3.安装虚拟环境: (1)安装virtualenv: pip ins ...

  5. 安装kubernet（k8s）

    简介: 需要学习的都明白,这里就不赘述了. 本文采用CentOS-7-x86_64-DVD-1810.iso 一:安装操作系统 本来是喜欢用fedora的,但是fedora貌似包维护的不好,就又开始用 ...

  6. Nginx配置文件的反向代理

    问题描述:项目需要预览pdf,前端控件支持的格式是http://192.168.0.1/pdf/a.pdf  是这样的,然后我就想给路径配个nginx反向代理就好了,但是配置的时候出问题了. 1.正确 ...

  7. JavaScript图形实例：图形的旋转变换

    旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P( ...

  8. CF1197D Yet Another Subarray Problem

    思路: 使用动态规划,在经典的最大子段和解法基础上进行扩展.dp[i][j]表示以第i个数为结尾,并且长度模m等于j的所有子段的最大cost. 实现: #include <bits/stdc++ ...

  9. 智能指针.Qt测试

    1.Qt598x64vs2017(或 Qt598x86vs2015[配置使用vs2017]).Win10x64 2.测试代码: 2.1.MainWindow.h class MainWindow : ...

  10. DataGridView中的Combobox的应用

    在WinForm中DataGridView可谓是应用比较多的数据显示控件了,DataGridView中可以应用各种控件,关于这样的文章网上 已有很多.都是实例化一个控件然后通过DataGridView ...