码迷,mamicode.com
首页 > 其他好文 > 详细

vertical-align用法

时间:2021-05-24 07:02:27      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:pre   表单   属性   cal   一个   语法   middle   vertica   top   

CSS 的 vertical-align 属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。

语法:

vertical-align : baseline | top | middle | bottom 

  技术图片

 

 一.图片、表单和文字对齐

图片、表单都属于行内块元素,默认的 vertical-align 是基线对齐。

技术图片

 

 此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

二. 解决图片底部默认空白缝隙问题

bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。

主要解决方法有两种:

1.给图片添加 vertical-align:middle | top| bottom 等。 (提倡使用的)

2.把图片转换为块级元素 display: block;

 

vertical-align用法

标签:pre   表单   属性   cal   一个   语法   middle   vertica   top   

原文地址:https://www.cnblogs.com/clarehjh/p/14760215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!