在写页面的时候,经常会遇到元素垂直居中的需求。有时候一连试了几种方法,并没有效果,那是因为你没有用对方法,每种垂直居中,都有不同的使用条件。下面我们来详细了解一下吧。
这里收集了八种不同的方法。
适用场景:单行文字垂直居中。
在一个块级元素中有一行字,想让文字垂直居中,便可以在块级元素上设置和元素高度一致的行高。如图所示<div>元素,添加行高后,文字的位置就从左边变成右边的,实现了垂直居中。
html
css
适用场景:图片垂直居中。
给父元素添加line-height,给图片元素加上vertical-align: middle。
适用场景:居中元素能被撑开有高度即可使用。
适用场景:多行文字垂直居中,或者将块元素转成行内元素也可使用。
vertical-align 只对 table-cell 以及 inline-element 起作用,vertical-align 的值是相对于其父元素的,父元素必须是行内元素。如果想用于块元素,我们可以将父元素转化为table,这样就能使用此方法。
多行文字居中
块元素居中
适用场景:这种方法适用于块级元素,需要设置元素的高度。也就是设置子元素距离父元素顶部50%,然后通过margin把子元素向上移动自身高度的一半。
适用场景:都可以使用。
css有两种写法:
适用场景:块级元素垂直居中。
把要垂直居中的元素相对于父元素绝对定位,top和bottom设置为相等的值,我这里设置成0了。再将要居中的元素的margin设为auto,这样就可以实现垂直居中了。
适用场景:须知父元素的高度和子元素的高度。如果指定父元素高度为300px,子元素高度为100px,要实现垂直居中需要设置父元素的上下padding为100px。
本文由知识库于2021-09-14发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://www.longgeyun.com/knowledge/3560.html
上一篇ps新建参考线的快捷键是什么(ps常用快捷键一览表)
下一篇清理电脑缓存怎么清理(清除电脑缓存的图文教程)
高校最常见的食物中毒有哪些
急性肠胃炎与食物中毒怎么分辨
莫代尔面料和纯棉面料哪个好内裤 哪个儿童可以穿
为什么说开速腾的都不是一般人 速腾开出去有面子吗
活珠子和毛蛋的区别在哪里 哪个好吃
家里放石头的八大禁忌有哪些 家中石头最佳摆放位置
怎么判断自己帅还是丑男 男生怎样越长越帅
单身女生红绳戴左手还是右手 女生红绳戴哪里合适
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台