如何居中一个元素(正常、绝对定位、浮动元素)
来源:互联网 发布:java游戏程序设计教程 编辑:程序博客网 时间:2024/05/18 03:06
题目点评
这道题目的提问比较多,连续问了三个问题,正常元素、绝对定位元素、互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要清楚。可以先把水平居中各种情况说清楚,然后在把垂直居中说清楚。
(一)元素水平居中的方式
1)行级元素水平居中对齐(父元素设置 text-align:center)
2) 块级元素水平居中对齐(margin: 0 auto)
3)浮动元素水平居中
- 宽度不固定的浮动元素
html代码
CSS样式
- 宽度固定的互动元素
html代码
css代码
4)让绝对定位的元素水平居中对齐
这种方式非常独特,大家一定要记牢这种方式,会用这种方式的薪资待遇必然高出几千¥
经验分享:水平居中的主要属性有
1. text-alin:center;
2. margin:0 auto
3. position:relative|absolute; left:50%;
(二)元素垂直居中对齐
1)对行级元素垂直居中(heiht与line-height的值一样)
2)对块级元素垂直居中对齐
2.1 父元素高度固定的情况
1)父元素的height与line-height值相同
2)需要垂直居中的元素
vertical-align:middle;// 垂直居中对齐
display:inline|inline-block 块级元素转行级元素
HTML代码
CSS代码
2.2 父元素高度不固定的情况
父元素的padding-top和padding-bottom一样
--------------------------------------------------------------------------------------------------------------------
如果看不懂,可以看视频操作,代码演示 http://www.chuanke.com/3885380-190205.html
阅读全文
0 0
- 如何居中一个元素(正常、绝对定位、浮动元素)
- 如何居中正常元素、浮动元素以及绝对定位元素
- 如何居中一个元素(二)(正常、绝对定位、浮动元素)?
- Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?
- 块状元素居中/浮动元素居中/绝对定位元素居中/内容居中
- 如何居中一个浮动元素
- 如何居中一个浮动元素?
- 绝对定位元素居中
- 绝对定位元素、浮动元素会生成一个块级框
- 居中一个浮动元素
- 如何居中div?如何居中一个浮动元素?
- 绝对定位的元素的水平居中的一个方法
- CSS:绝对定位元素实现水平居中
- 绝对定位元素的居中实现
- 绝对定位的元素怎么居中显示
- 让绝对定位的元素居中
- 绝对定位元素的水平垂直居中
- 绝对定位元素设置水平居中
- PTA_6-4 另类堆栈(15 分)_单指针栈
- 【Android】常用ADB命令总结
- OkGo添加公共参数
- 在Nanopi-NEO上编译带Cedrus硬件编码器的ffmpeg动态链接库
- jQuery 遍历
- 如何居中一个元素(正常、绝对定位、浮动元素)
- Ubuntu软件操作的相关命令
- 6-2 Evaluate Postfix Expression(25 分)_后缀表达式求值
- 1.如何在logback中显示mybatis查询日志
- Windows server安装Oracle 11g 停在2%
- git学习四:eclipse使用git提交项目
- java除法保留n位有效位
- shellinabox
- java Collection.sort