有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vertical-align(CSS Vertical-align)实现垂直居中

代码编程 炮渣日记 2周前 (11-14) 26次浏览 已收录 0个评论 扫描二维码

有的时候做垂直居中操作不好控制,今天简单探索一下这个vertical-align样式

Vertical-align:调整垂直方向的位置

使用此样式的前提,你得为该元素设置空间,比如:行高

vertical-align(CSS Vertical-align)实现垂直居中

如果给下面的div设置position:absolue;那呈现的效果就不是居中了,元素原封不动;

能让postion:absolue;移动的设置有top…和margin-等等

元素里面的文字内容是垂直居中的,因为文字是默认有行高的。

设置了vertical-align:middle;便实现了垂直居中,前提需要在父容器里面设置行高等于容器的高度,让子容器有空间条件达到相对于父容器垂直居中。Line-height:500px;

针对line-height、text-align这样的属性,它们作用在容器里面的内容,对自己里面的内容下命令,对自身不起作用,不像width,height这样的属性改变自身。

Vertical-align:它直接作用在自身,如同width,height作用在自身一样。

Verical-align:middle;

两个父级容器,其中一个容器设置此属性,并且两者的子容器都没有设置此属性

vertical-align(CSS Vertical-align)实现垂直居中

设置了vertical-align:middle;的容器中间线对准没有设置此属性的底部

两个父级容器,其中一个父级容器的子容器设置此属性:

vertical-align(CSS Vertical-align)实现垂直居中

基于这样的原因可以实现另一种垂直:

父容器有两个子容器

写一个子容器没有宽度的div,高度是父容器的高度,另一个子容器直接设置vertical-align:middle;就可以实现垂直居中。原理就是用到的:两个父级容器,其中一个容器设置此属性,并且两者的子容器都没有设置此属性。设置了vertical-align:middle;的容器中间线对准没有设置此属性的底部。

大家可以总结一下都有哪些样式属性作用于自身的,像:width、height…,哪些是作用于它里面的子元素的,像:line-height、text-align…

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址