029_CSS水平对齐

最新推荐文章于 2024-04-23 13:46:57 发布

原创最新推荐文章于 2024-04-23 13:46:57 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #web前端

css学习专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一种使用CSS margin属性实现块元素水平居中的方法。通过将左右外边距设置为auto，可以使得元素在其父容器内居中显示。需要注意的是，在某些浏览器版本中，这种方法可能无效，除非指定了DOCTYPE。

1. 使用margin属性来水平对齐

1.1. 可通过将左和右外边距设置为"auto", 来对齐块元素。把左和右外边距设置为auto, 规定的是均等地分配可用的外边距, 结果就是居中的元素。

1.2. 使用margin: auto, 一定要声明!DOCTYPE, 否则在某些浏览器版本中无效。

1.3. 如果宽度是100%, 则对齐没有效果。

1.4. 例子

1.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>使用margin属性来水平对齐</title>
		
		<style type="text/css">
			.center {
				margin: 0 auto;
				width: 70%;
				background-color: #b0e0e6;
			}
		</style>
	</head>
	<body>
		<div class="center">
			<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
			<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
		</div>
	</body>
</html>

1.4.2. 效果图