029_CSS水平对齐

最新推荐文章于 2022-04-28 20:05:06 发布

自由与束缚JavaJavaScript

最新推荐文章于 2022-04-28 20:05:06 发布

阅读量115

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109133335

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

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. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
029_CSS水平对齐

1. 在CSS中, 可以使用多种属性来水平对齐元素。2. 使用margin属性来水平对齐2.1. 可通过将左和右外边距设置为"auto", 来对齐块元素。把左和右外边距设置为auto, 规定的是均等地分配可用的外边距, 结果就是居中的元素。2.2. 使用margin:auto, 一定要声明!DOCTYPE, 否则在某些浏览器版本中无效。2.3. 如果宽度是100%, 则对齐没有效果。2.4. 例子2.4.1. 代码<!DOCTYPE html><html&g
复制链接

扫一扫

专栏目录