CSS 布局 -- 水平 & 垂直对齐

最新推荐文章于 2024-10-31 14:41:54 发布
最新推荐文章于 2024-10-31 14:41:54 发布
阅读量354 收藏
点赞数
分类专栏： CSS 文章标签： CSS 布局 水平对齐 垂直对齐
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80418141
版权

元素居中对齐

   要水平居中对齐一个元素，可以使用 margin:auto;

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

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

<!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), 可以使用 marig：auto;</p>
		
		<div class="center">
			<p><b>注意：</b>使用 margin：auto 无法兼容 IE8， 除非 !DOCTYPE 已经声明。</p>
		</div>

	</body>
</html>

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用

 

 

 

文本居中对齐

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.center {
				text-align:center;
				border:3px solid #73AD21;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<h2>文本居中对齐</h2>
		
		<div class="center">
			<p>文本居中对齐</p>
		</div>

	</body>
</html>

图片居中对齐

   要让图片居中对齐，可以使用 margin:auto;并将他放到块元素中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			img {
				display:block;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
		<h2>图片居中对齐</h2>
		<p>要让图片居中对齐，可以使用 margin：auto，并将它放到块元素中</p>
		
		
		<img src="paris.jpg" alt="Paris" style="width:40%">

	</body>
</html>

左右对齐--使用定位方式

   我们可以使用 positon：absolute;属性来对齐元素

<!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>

   注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

   提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异。

  当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

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

左右对齐 -- 使用 float 方式

   我们也可以使用 float 属性来对齐元素

<!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>

   我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			div {
				border:3px solid #4CAF50;
				padding:5px;
			}
			
			.img1 {
				float:right;
			}
			
			.clearfix {
				overflow:auto;
			}
			
			.img2 {
				float:right;
			}
		</style>
	</head>
	<body>
		
		<p>以下实例图在父元素中移除，很不美观：</p>

		<div>
		<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
		如约智惠 - 你的生活助手！！！</div>

		<p style="clear:right">在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题:</p>

		<div class="clearfix">
		<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
		如约智惠 - 你的生活助手！！！！！</div>

	</body>
</html>

    当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：

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

	</body>
</html>

 

垂直居中对齐--使用padding

 

   CSS中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.center {
				padding:70px 0;
				border:3px solid green;
			}
		</style>
	</head>
	<body>
		<h2>垂直居中</h2>
		<p>以上实例，我们使用padding属性实现元素的垂直居中：</p>
		
		<div class="center">
			<p>我是垂直居中的。</p>
		</div>

	</body>
</html>

   如果要水平和垂直都居中，可以使用 padding 和 text-align: center

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			.center {
				padding:70px 0;
				border:3px solid green;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h2>Centering</h2>
		<p>以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p>
		
		<div class="center">
			<p>我是水平和垂直都居中的。</p>
		</div>

	</body>
</html>

 

垂直居中--使用 line-height

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>自学教程(如约智惠.com)</title> 
<style>
.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>
<body>

<h2>居中</h2>
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>

<div class="center">
  <p>我是垂直居中的。</p>
</div>

</body>
</html>

 

垂直居中-- 使用 position 和 transform

 

    除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>自学教程(如约智惠.com)</title> 
<style>
.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>

<div class="center">
  <p>我是水平和垂直居中的。</p>
</div>

<p>注意: IE8 及更早版本不支持 transform 属性。</p>

</body>
</html>

参考:

https://www.yuque.com/docs/share/0b7aa087-65cc-437b-b58d-92e0d92238e2

冷月醉雪
关注
专栏目录
display:inline-block的使用示例
09-25
在网页布局设计中，`display:inline-block` 是一个非常实用的CSS属性，它允许元素以行内元素的方式显示，但同时保留着块级元素的特性，如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局，尤其是需要在有限的...
CSS垂直分布
qq_57633481的博客
11-24 420
CSS垂直分布
CSS如何设置高度为屏幕高度_掌握 CSS 精髓：布局
weixin_39620279的博客
11-21 1271
CSS 虽然初衷是用来美化 HTML 文档的，但实际上随着 float、position 等属性的出现，它已经可以起到调整文档渲染结构的作用了，而随着弹性盒子以及网格布局的推出，CSS 将承担越来越重要的布局功能。渐渐地我们发现 HTML 标签决定了页面的逻辑结构，而 CSS 决定了页面的视觉结构。这一课时我们先来分析常见的布局效果有哪些，然后再通过代码来实现这些效果，从而帮助你彻底掌握 CSS ...
CSS中实现元素水平居中、垂直居中的6个方法（详解）
热门推荐
xtcbql的博客
09-30 4万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
CSSpadding复合属性
m0_46744635的博客
08-16 447
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSSpadding复合属性</title> <style> div{ width: 300px; .
实现垂直布局的 8 种方式
一碗周
12-24 1824
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 写在前面 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。 该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) 实现垂直布局的 8 种方式 .
基于HTML&amp;CSS的练题网页
06-29
Flexbox允许在容器内水平或垂直排列子元素，而Grid则可以创建多列多行的网格结构。例如，使用Flexbox实现居中对齐的代码如下： ```css .container { display: flex; justify-content: center; align-items: ...
用&amp;lt;TABLE&amp;gt;语句来实现圆角表格可以省去制作圆角图片之苦！
10-30
6. valign：设置单元格内容的垂直对齐方式，常见的值有top、middle和bottom。 7. background：设置表格的背景图像。 8. bgcolor：设置表格的背景颜色。 9. bordercolor：设置表格边框的颜色。 通过结合HTML和CSS，...
webcss7PPT教案学习.pptx
10-01
而对于`a`和`img`标签，我们可能需要消除在IE浏览器中出现的边框，并利用`vertical-align`进行垂直对齐。此外，列表项`li`、强调标签`i`和`em`等也需要被初始化以消除默认样式。 在处理链接`a`时，我们需要初始化并...
自考网页设计与制作试卷及答案（一）.docx
09-30
- **解释**：在CSS中，如果将垂直对齐属性的值设置为`top`，表示元素将以其他普通元素的顶线作为被定义元素的顶线。 ### 17. CSS文本修饰 - **知识点**：当CSS的`text-decoration`属性取值为`overline`时，表示什么...
css元素的水平与垂直布局
weixin_42444219的博客
06-13 725
水平布局 一个元素在其父元素水平方向上的位置由margin-left,border-left,padding-left,content(width),padding-right,border-right,margin-right共同决定。 一个元素在父元素中时，必须满足以上七个属性值的和等于其父元素内容区的width。 若等式未成立，则会把这种情况称为过度约束，此时等式会自动进行调整，调整的情况为： 如果七个值中没有为auto的，浏览器自动调整margin-right来配平等式。 七个值中width，ma
CSS学习，常用常记（对齐，组合选择符，伪类）
Sinhaeng_Hhjian
03-21 261
元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用margin: auto; 设置到元素的宽度将防止它溢出到容器的边缘； 元素通过指定宽度，并将两边的空外边距平均分配； .center { margin: 0 auto; width: 60%; border: 3px solid #73AD21; padding: 10px; ...
2021-10-15CSS学习笔记
weixin_39513719的博客
10-19 322
CSS基础概念注释方法id 和 class 选择器CSS创建背景backgrounds 基础概念 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。 属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 注释方法 CSS注释以 /* 开始, 以 */ 结束 id 和 class 选择器 如果要在HTML元素中设置CSS样式，需要在元素中设置"id" 和
CSS布局——水平垂直居中、等分布局，web前端开发师学习
2401_84002730的博客
04-03 1029
等分布局就是将一行分为多列，每一列的宽度是相同的。即用padding来实现子元素之间的间距，使用background-clip使子元素padding部分不显示背景。中间的部分是三栏中高度最高的部分。实现圣杯布局效果也可以采用flex布局，就是一个大盒子包含三个子盒子，左右两个盒子固定宽高，中间盒子设置flex：1（占据大盒子剩余空间）。本行分为四列，所以宽度为25%，padding-right是设置一个元素的右填充在此填充了10px，即每个子元素之间的空隙。5，两栏布局，左边固定，右边自适应，左右不重叠。
一篇文章理解CSS垂直布局方法
最新发布
superherooooss的博客
10-31 522
在 2024 年的 CSS 原生属性中允许使用进行垂直居中。
div水平垂直居中的七种方法
weixin_44330646的博客
03-02 4586
如何将div垂直水平居中？7个小妙招
CSS小技巧之position和transform
chaocainiao的博客
09-13 647
position 属性指定了元素的定位类型,CSS中常用的定位属性.元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。 transform是css3中的一个特征，可以实现元素的缩放，位移，变形。 属性值： scale：缩放 translate 位移 rotate 旋转 skew 倾斜 此次使用position和transform实现一个旋转的太极图案.
CSS布局-水平&垂直对齐
qq_40407724的博客
08-25 176
CSS布局-水平&amp;垂直对齐 水平居中 元素居中 设置width属性（不能为100%），设置margin:auto; 文本居中 使用属性text-align:center; 图片居中 将图片放入块元素中，同元素居中 垂直居中 使用padding：100px 0； 设置line-height 属性值和 height 属性值相等让元素居中 使用了 positionin...
Css实现元素的垂直居中
乱世刀疤
10-09 5711
在Css中尽管有vertical-align这个特性,但并未能解决所有的垂直居中问题,比如位置高度元素的垂直居中。下面列出一些实现元素居中的方法:使用table实现元素的居中:实现元素垂直居中的最简单方式应该就是利用table中设置单元格的 vertical-align:middle 了：css代码如下：.data-sheet td{ vertical-align:middle;}
CSS居中布局完全指南：水平&amp;垂直居中方法解析
"这篇文章主要汇总了CSS中实现元素垂直和水平居中的多种方法，包括文本、单个块级元素、多个水平或垂直排列的元素以及同时实现垂直水平居中的技术。" 在CSS布局中，居中对齐是常见的需求，这篇文章详细介绍了多种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值