实现图标和文字水平居中(vertical-align和line-height)

未实现前
需要实现的效果
使用vertical-align:middle实现上述效果

==》总结:

开始想使用line-height实现上述效果(设置父元素P的高度为26px和图标的高度一样大小,然后再使用line-height让文字垂直居中),但是发现没变化。(为什么这种方法不可以???)

给P元素加背景红色,发现文字向下

而后改用vertical-align直接解决问题。

==》vertical的用法总结:参考资料:利用vertical-align:middle实现在整个页面居中

vertical-align的定义:vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

假设在一个DIV中包含一个IMG元素,直接对IMG元素设置vertical-align:middle样式,发现毫无变化!!!

因为该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。所以其参考对象是跟它同一级的内嵌元素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容