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

最新推荐文章于 2023-07-20 07:16:17 发布

hym2111

最新推荐文章于 2023-07-20 07:16:17 发布

阅读量1.4k

点赞数

分类专栏： java web

本文链接：https://blog.csdn.net/hym2111/article/details/50554158

版权

java web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

类似这种效果：

<!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>

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

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

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

hym2111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
带图标和箭头、文字的垂直居中

类似这种效果：无标题文档 .p1{ height:18px; background-image:url(image/jiao.png); background-repeat:no-repeat; background-position:95% 50%; background-color:#FF0000; margin-right:10px;
复制链接

扫一扫