一 要实现的样式,文字在图片的垂直居中位置

二 实现的代码:

<style> .flag{ position: absolute; bottom: 0; width: 23rem; height: 2.5rem; line-height: 2.5rem; } .flag img{ width: 1.58rem; height: 2.1rem; vertical-align: middle; } </style> <div> <img src="http://www.mamicode.com/img/flag.png"> <span>币种:...</span> </div>

三 解释一下这么写的原因:

1,img是行内元素,并且带有默认样式vertical-align:baseline

2,vertical-align指定行内元素(inline)垂直对齐方法,默认属性值是baseline.

3,设置baseline的元素会影响周边行内元素,让baseline元素和周边元素都处于容器底部偏上一点点的基线位置

所以默认情况下会呈现如下样式:币种位于底部,即使设置了line-height也无法让币种垂直居中

4,解决要领:给旗子设置vertical-align:middle让旗子垂直居中,然后给父容器设置line-height让币种垂直居中

以上理解,如有错误,欢迎斧正

css实现文字相对付图片垂直居中