CSS布局-水平和垂直对齐

最新推荐文章于 2022-03-28 09:34:42 发布

一只爱好编程的程序猿

最新推荐文章于 2022-03-28 09:34:42 发布

阅读量185

点赞数 1

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_37881565/article/details/108594882

版权

CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

CSS布局-水平和垂直对齐

元素居中对齐

要水平居中对齐一个元素（如<div>），可以使用margin:auto;。

设置元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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>水平居中块级元素对齐</p>
	</div>

</body>
</html>

效果图如下所示:

注意：如果没有设置width属性（或者设置100%），居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用text-align:center；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
	.center {
		text-align: center;
		border: 3px solid green;
	}
</style>
</head>
<body>

	<h2>文本居中对齐</h2>

	<div class="center">
	  <p>文本居中对齐。</p>
	</div>

</body>
</html>

效果图如下所示:

一只爱好编程的程序猿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS布局-水平和垂直对齐

CSS布局-水平和垂直对齐元素居中对齐要水平居中对齐一个元素（如<div>），可以使用margin:auto;。设置元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配:<!DOCTYPE html><html><head><meta charset="utf-8"> <style> .center { margin: auto; width: 60%; borde
复制链接

扫一扫

专栏目录