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

来源:互联网 发布: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
原创粉丝点击