资讯专栏INFORMATION COLUMN

css两种垂直居中对齐解决方案

ztyzz / 2170人阅读

第一种垂直居中方法

利用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

相关文章

  • css两种垂直居中对齐解决方案

    第一种垂直居中方法 利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件: 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align:middle 此方法在开发中不能右浮动(不能靠右边) 下方是完整代码,可以新建一个HTML文件进行测...

    elarity 评论0 收藏0
  • 不定元素宽高用css实现内容水平和垂直居中

    摘要:在开发中经常遇到这个问题,即让某个元素的内容在水平和垂直方向上都居中,内容不仅限于文字,可能是图片或其他元素。这篇文章就来总结一下都有哪些方法可以实现水平和垂直都居中。表示这些元素将相对于本容器水平居中,也是同样的道理垂直居中。 在开发中经常遇到这个问题,即让某个元素的内容在水平和垂直方向上都居中,内容不仅限于文字,可能是图片或其他元素。而且我们希望不要涉及宽度和高度,也就是说,我们不...

    Chao 评论0 收藏0
  • css布局基础总结

    摘要:想写出高效合理的布局,必须以深厚的基础为前提。现在布局方式主要分为三种传统布局方案等配合。弹性布局,实现方便,兼容性较好。在环境中的元素按照如下规则渲染和文档流一样,元素按照自己类型的布局特性从左到右,从上往下依次排列。 前端css布局知识繁杂,实现方式多种多样。想写出高效、合理的布局,必须以深厚的css基础为前提。为了方便记忆和复习,将css布局要点记录如下。内容较多,应用方面说的不...

    PrototypeZ 评论0 收藏0

发表评论

0条评论

ztyzz

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<