CSS 对齐

最新推荐文章于 2024-12-04 13:17:53 发布

冷月醉雪

最新推荐文章于 2024-12-04 13:17:53 发布

阅读量535

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 实例 CSS 文章标签： CSS 对齐实例

本文链接：https://blog.youkuaiyun.com/lengyuezuixue/article/details/81356686

CSS 同时被 2 个专栏收录

53 篇文章

订阅专栏

CSS 实例

22 篇文章

订阅专栏

本文介绍了使用CSS进行网页元素的居中、左右对齐等布局技巧，包括margin、position及float属性的应用，并强调了在不同浏览器中确保一致性的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用margin的中间调整

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.center {
				margin:auto;
				width:60%;
				border:3px solid #73AD21;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<h2>元素居中对齐</h2>
		<p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p>

		<div class="center">
		  <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
		</div>
	</body>
</html>

左/右位置对齐

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.right {
				position:absolute;
				right:0px;
				width:300px;
				border:3px solid #73AD21;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<h2>右对齐</h2>
		<p>以下实例演示了如何使用 position 来实现右对齐:</p>

		<div class="right">
		  <p>菜鸟教程 -- 学的不仅是技术，更是梦想！！</p>
		</div>
	</body>
</html>

使用跨浏览器解决方案，设置左/右位置对齐

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			body {
				margin:0px;
				padding:0px;
			}
		
			.right {
				float:right;
				background-color: #b0e0e6;
			}
		</style>
	</head>
	<body>
		<div class="right">
			<p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
		</div>
	</body>
</html>

左/右对齐，浮动

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.right {
				float:right;
				width:300px;
				border:3px solid #73AD21;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<h2>右对齐</h2>
		<p>以下实例演示了使用 float 属性来实现右对齐:</p>

		<div class="right">
		  <p>我老爹在小时候给我的一些人生建议，我现在还记忆深刻。</p>
		</div>
	</body>
</html>

使用跨浏览器解决方案，设置左/右位置对齐，浮动

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			body {
				margin:0px;
				padding:0px;
			}
		
			.right {
				float:right;
				width:300px;
				background-color: #b0e0e6;
			}
		</style>
	</head>
	<body>
		<div class="right">
			<p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
		</div>
	</body>
</html>

参考：

https://www.yuque.com/docs/share/f630f6be-dba7-4337-8c56-10b152762c32