【笔记】学习CSS布局03——margin:auto;

最新推荐文章于 2024-07-22 22:25:43 发布

原创最新推荐文章于 2024-07-22 22:25:43 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何使用CSS设置块级元素的宽度并实现水平居中，同时讨论了在浏览器窗口宽度小于元素宽度时出现水平滚动条的问题。

#main {
  width: 600px;
  margin: 0 auto; 
}

设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...

代码实例：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		#main {
			width:500px;
			margin:0 auto;
			background-color: #65ca5c;
		}
	</style>
</head>
<body>
	<div id="main">
		设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案...
	</div>
</body>
</html>

效果图如下：