第一种垂直居中方法
利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件:
设置父元素的行高line-height等于父元素height的高度
子元素必须是行内块级元素display:inline-block;
子元素设置vertical-align:middle
此方法在开发中不能右浮动(不能靠右边)
下方是完整代码,可以新建一个HTML文件进行测试(绿色的盒子):
导航条 xxxxxxxxxxx
第一种方法结束。
第二种垂直居中方法这种方法比较暴力,利用定位解决:
父元素开启相对定位
子元素绝对定位
子元素先向下移动父元素的50%,此时子元素的顶部与父元素的中线对齐了
子元素再向上移动自身高度"height"的一半,此时子元素的中线和父元素的中线对齐了
此方法可以右对齐,设置子元素right:0px;即可
下方是完整代码,可以新建一个HTML文件进行测试(绿色的盒子):
导航条
第二种方法结束。
总结上面两种方法的特点都是让子元素的中线和父元素的中线对齐。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114556.html
第一种垂直居中方法 利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件: 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align:middle 此方法在开发中不能右浮动(不能靠右边) 下方是完整代码,可以新建一个HTML文件进行测...
摘要:在开发中经常遇到这个问题,即让某个元素的内容在水平和垂直方向上都居中,内容不仅限于文字,可能是图片或其他元素。这篇文章就来总结一下都有哪些方法可以实现水平和垂直都居中。表示这些元素将相对于本容器水平居中,也是同样的道理垂直居中。 在开发中经常遇到这个问题,即让某个元素的内容在水平和垂直方向上都居中,内容不仅限于文字,可能是图片或其他元素。而且我们希望不要涉及宽度和高度,也就是说,我们不...
摘要:想写出高效合理的布局,必须以深厚的基础为前提。现在布局方式主要分为三种传统布局方案等配合。弹性布局,实现方便,兼容性较好。在环境中的元素按照如下规则渲染和文档流一样,元素按照自己类型的布局特性从左到右,从上往下依次排列。 前端css布局知识繁杂,实现方式多种多样。想写出高效、合理的布局,必须以深厚的css基础为前提。为了方便记忆和复习,将css布局要点记录如下。内容较多,应用方面说的不...
阅读 2061·2021-10-14 09:43
阅读 2148·2019-08-30 15:55
阅读 704·2019-08-30 14:23
阅读 1987·2019-08-30 13:21
阅读 1208·2019-08-30 12:50
阅读 2171·2019-08-29 18:46
阅读 2250·2019-08-29 17:28
阅读 2326·2019-08-29 17:21