Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?
题目点评
这道题目的提问比较多,连续问了三个问题,正常元素、绝对定位元素、互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要清楚。可以先把水平居中各种情况说清楚,然后在把垂直居中说清楚。
(一)元素水平居中的方式
1)行级元素水平居中对齐(父元素设置 text-align:center)
[html] view plain copy
<div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">
<span>行级元素垂直居中</span>
</div>
2) 块级元素水平居中对齐(margin: 0 auto)
[html] view plain copy
<div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">
<div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 块级元素水平居中</div>
</div>
3)浮动元素水平居中
宽度不固定的浮动元素
html代码
[html] view plain copy
<div class="outerbox">
<div class="innerbox">我是浮动的</div>
</div>
CSS样式
[css] view plain copy
.outerbox{
float:left;
position:relative;
left:50%;
}
.innerbox{
float:left;
position:relative;
right:50%;
}
宽度固定的互动元素
html代码
[html] view plain copy
<div class="outerbox">
<div>我是浮动的</div>
</div>
css代码
[css] view plain copy
.outerbox{
background-color:pink; /*方便看效果 */
width:500px ;
height:300px; /*高度可以不设*/
margin: -150px 0 0 -250px; /*使用marin向左移动250px,保证元素居中*/
position:relative; /*相对定位*/
left:50%;
top:50%;
}
4)让绝对定位的元素水平居中对齐
这种方式非常独特,大家一定要记牢这种方式,会用这种方式的薪资待遇必然高出几千¥
[css] view plain copy
.center{
position: absolute; /*绝对定位*/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略,且为0*/
right: 0; /*此处不能省略,且为0*/
}
经验分享:水平居中的主要属性有
1. text-alin:center;
2. margin:0 auto
3. position:relative|absolute; left:50%;
(二)元素垂直居中对齐
1)对行级元素垂直居中(heiht与line-height的值一样)
[css] view plain copy
height:300px;
line-height:300px;
2)对块级元素垂直居中对齐
2.1 父元素高度固定的情况
1)父元素的height与line-height值相同
2)需要垂直居中的元素
vertical-align:middle;// 垂直居中对齐
display:inline|inline-block 块级元素转行级元素
HTML代码
[html] view plain copy
<div class="center">
<div class="inner"></div>
</div>
CSS代码
[css] view plain copy
.center{
width: 500px;
height:300px;
line-height: 300px;
border:1px solid;
}
.inner{
background: blue;
width: 300px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
2.2 父元素高度不固定的情况
父元素的padding-top和padding-bottom一样
--------------------------------------------------------------------------------------------------------------------
如果看不懂,可以看视频操作,代码演示 http://www.chuanke.com/3885380-190205.html
转载于:https://blog.51cto.com/12803871/1923672
Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?相关推荐
- Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?
题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 转载于:https://blog.51cto ...
- Web前端面试指导(完结)
首先感谢网友对我的关注,对智学无忧的关注!历经个多月,终于将web前端面试指导的课程全部更新完毕!希望对学习前端和面试前端的同学有帮助.智学无忧祝大家前程无忧! 面试真题学习地址 1. Web前端面 ...
- Web前端面试指导(二):编写简历,吃透简历内容
2.1 简历模板(仅供参考,不得千篇一律) ~~~~~~温馨提示 ~~~~~~ 简历模板文件在QQ群 490916635 2.2 吃透简历内容 2.2.1 吃透自己的简历 Ø 简历出现的名词 ...
- Web前端面试指导:谈谈浏览器的兼容性
题目点评 这个 问题是非常抽象的,越是抽象的问题 越能 表现出我们的表达能力,而面试官就喜欢根据你的回答来追问, 不断地 打断你的思路,这个 时候 不要慌, 一定要 坚信自己. 回答思路 我们 在开发 ...
- Web前端面试指导(四十四):什么是响应式开发?
题目点评 响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必 ...
- Web前端面试指导 四十 CSS3有哪些新特性
首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的.教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈-我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转 ...
- Web前端面试指导(四十):CSS3有哪些新特性?
题目点评 CSS3的特性那么多该从哪里说起了?很显然这道题目是有陷阱的,你不可能将所有的特性一个不漏的说出来,就算你说出来,别人还认为你是背的了!所以你主要讲一下在项目中经常用到的Css3的属性就可以 ...
- Web前端面试指导(三十九):new操作符具体干了什么呢?
题目点评 考察对new关键的深刻认识,是否对前端知识有专研,如果没有专研的人,肯定说创建了一个对象,恭喜你面试官知道你是小菜鸟来的,这次面试基本上没有太大的希望了.一定要对new过程的4个步骤非常清楚 ...
- Web前端面试指导 四 面试前准备-有备而去百战百胜
首先给大家分享一个巨牛巨牛的人工智能教程,是我无意中发现的.教程不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵段子,像看小说一样,哈哈-我正在学习中,觉得太牛了,所以分享给大家!点这里可以跳转 ...
最新文章
- pl/sql连接数据库
- hashcode java_hashCode方法的作用?
- Netty源码分析第5章(ByteBuf)----第5节: directArena分配缓冲区概述
- html5新增的js,HTML5新增属性data-*和js/jquery之间的交互及注意事项
- rabbitmq 集群保证顺序消费_随笔《RabbitMQ》如何保证消息不被重复消费
- Silverlight DataGrid 在显示数据, 如果遇到全角的符号, 好像会出错. 待测试.
- 推荐一些高质量的自学网站
- pdm系统是归档服务器吗,PDM系统档案管理
- 菜鸡程序员是如何写代码的?
- 5GC 网元AMF、SMF、UPF、PCF、UDM等介绍
- walking机器人入门教程-工具-命令管理器
- dah计算机原理,卢伟计算机原理themicrocomputerprinciplech3.pptx
- 8个优秀的预训练模型,帮助您开始使用自然语言处理(NLP)
- c语言sht 和ch,普通话指导:z、c、s和zh、ch、sh的分辨
- meterpreter + 键盘记录
- H264——H264码流分析实例(SPS、PPS)
- 医学图像中解剖学坐标系(病人坐标系)和图像坐标系
- 第三讲. COTS包交换介绍
- SFX连接Linux中文乱码问题
- 关于行为评分卡建模的数据准备
热门文章
- 4改变顶点位置_从4种腰椎前凸临界点探寻腰椎退变过程
- buck电路matlab,matlab buck电路仿真
- 2x麦克劳林公式_极限求解-泰勒公式理解
- 亚太杯数学建模竞赛优秀论文_【优秀论文】2019数维杯国际大学生数学建模竞赛C题优秀论文...
- c语言const 修饰二级指针,C++中const修饰二级指针(从类型‘int**’到类型‘const int**’的转换无效)...
- java使用哪个类,怎么知道 java类从哪个jar 加载
- postgresql 集合类型_PostgreSQL 分组集合新功能(GROUPING SETS,CUBE,ROLLUP)
- centos 访问网页重启php_php项目上线基于docker运行php+源码编译实现Nginx+阿里云RDS连接实现...
- 2021年南菁高中高考成绩查询,2021年无锡高考各高中成绩及本科升学率数据排名及分析...
- php百度地图地址解析失败,javascript - vue中使用百度地图 提示无法解析