带图标和箭头、文字的垂直居中

来源：互联网发布：php生成二维码编辑：程序博客网时间：2024/06/16 02:19

类似这种效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><title>无标题文档</title><style>.p1{height:18px;background-image:url(image/jiao.png);background-repeat:no-repeat;background-position:95% 50%;background-color:#FF0000;margin-right:10px;font-size:12px;line-height:18px;width:220px;position:relative;padding-left:20px;padding-top:15px;padding-bottom:15px;color:#333333;}.p1 img{width:14px;height:18px;padding:0 10px 0 0;margin:0px;float:left;}</style></head><body><p class="p1"><img src="image/address.png" align="middle"/>地址</p></body></html>

第一步：将箭头作为背景，设置在右边

第二步：控制图片的高度，容器的高度，还有文字的行高度一致。

第三步：将图片设置成浮动在左边

0 0