背景文字或者背景图片右对齐

最新推荐文章于 2025-05-16 10:49:56 发布

蓝色水

最新推荐文章于 2025-05-16 10:49:56 发布

阅读量2.7k

点赞数

分类专栏： HTML5 CSS

CSS 同时被 2 个专栏收录

80 篇文章

订阅专栏

HTML5

54 篇文章

订阅专栏

第一种办法：

</pre><pre name="code" class="html"><!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
	.demo,.demo2{width:300px;height:100px;background:#EEE;
	position:relative;margin:5px;
	}	
	.demo h1{position:absolute;right:10px;top:10px;}
	
	
	.demo2{background:#EEE url("http://static.blueidea.com/static/image/common/thread-next.png") no-repeat;background-position:90% 50%;}
	</style>
</head>
<body>
	<div class="demo">
		<h1>箭头</h1>
	</div>
	<div class="demo2">
		
	</div>
</body>
</html>

第二种办法：

background:url(arrow.jpg) no repeat right center; 这样是靠右垂直居对齐，但如果你想正好距右边界10px的话，好像只能从左边计算：background:url(arrow.jpg) no repeat 200px center; 200px为距左边界的距离。

第三种方法：

background:url(arrow.jpg) no-repeat right 98% center

第四种方法：

background:url(arrow.jpg) no-repeat right 10px center;