【一篇就够】行内元素与块级元素居中方法总结

已于 2022-10-04 18:45:18 修改
阅读量3.5k 收藏 28
点赞数 3
分类专栏： # CSS&布局系列 文章标签： 前端 html css
于 2022-10-04 18:36:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pakerder/article/details/127164350
版权

目录

 

一、行内元素

1.水平居中

        方法一：text-align: center

        方法二：子绝父相

        方法三：display:flex + justify-content:center

2.垂直居中

        方法一：display:flex + align-items:center

        方法二：子绝父相

        方法三：display:table-cell + vertical-align:middle

3.水平居中

        方法一：text-align:center + (line-height)

        方法二：dispaly:table-cell + text-align:center + vertical-align:middle

        方法三：display:flex + align-items:center + justify-content:center

        方法四：dispaly：flex + margin：auto；

        方法五：子绝父相

二、块级元素

1.水平居中

        方法一：margin: 0 atuo

        方法二：display:flex + justify-content:center

        方法三：display:flex + margin: 0 auto;

        方法四：子绝父相

2.垂直居中

        方法一：display:flex + algin-items:center

        方法二：display:flex + margin:auto 0

        方法三：子绝父相

3.水平垂直居中

        方法一：display:flex + algin-items:center + justify-content

        方法二：display:flex + margin: auto;

        方法三：子绝父相

        方法四：子绝父相2

三、关于display:table-cell和margin的说明

        display:table-cell:

        margin:

一、行内元素

1.水平居中

        方法一：text-align: center

父元素设置：text-align:center
说明：

        1.text-align设置在父元素上，对子元素的居中效果上只能对子元素中的行内元素起作用，对块级元素不起作用。
        2.text-align在对本元素中的文字居中效果上，只对块级元素起作用，对行内元素不起作用，行内元素的宽度由内容决定。
        3.text-align会被后代元素继承

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	text-align:center;
}
.inner{
	background-color: yellow;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
</div>

在这里插入图片描述

        方法二：子绝父相

父元素设置：postion:relative
子元素设置：postion:absolute + left:50% + transform:translateX(-50%)

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	position: relative;
}
.inner{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background-color: yellow;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
</div>

在这里插入图片描述

        方法三：display:flex + justify-content:center

父元素设置：display:flex ,  justify-content:center

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	display: flex;
	justify-content: center;
}
.inner{
	background-color: yellow;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
</div>

在这里插入图片描述

2.垂直居中

        方法一：display:flex + align-items:center

父元素设置：display:felx , align-items:center

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	display: flex;
	align-items: center;
}
.inner{
	background-color: yellow;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
</div>

在这里插入图片描述

        方法二：子绝父相

父元素设置：postion:relative
子元素设置：postion:absolute + top:50% + transform:translateY(-50%)

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	position: relative;
}
.inner{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: yellow;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
</div>

在这里插入图片描述

        方法三：display:table-cell + vertical-align:middle

父元素设置：display:table-cell , vertical-align:middle

说明：

vertical-algin是用来设置行内元素垂直对齐的方式
该属性定义行内元素的基线相对于该元素(设置了vertical-algin的元素)所在行的基线的垂直对齐方式。在表格中，这个属性会设置单元格框中的单元格内容的对齐方式。
只有元素是inline-block和inline的时候，设置vertical-algin才会起作用

.outer{
	width: 300px;
	/*height: 200px;*/
	background-color: #bfa;
	display: table-cell;
	vertical-align: middle;
}
.inner{
	background-color: yellow;
	vertical-align: middle;
}
img{
	vertical-align: middle;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
	<img src="./img/1.png" alt="">
</div>

在这里插入图片描述

3.水平居中

        方法一：text-align:center + (line-height)

父元素设置：text-align:center , line-height = height
说明：块级元素只设置line-height而不设置height时，line-height = height

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	text-align: center;
	line-height: 200px;
}
.inner{
	background-color: yellow;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
</div>

在这里插入图片描述

        方法二：dispaly:table-cell + text-align:center + vertical-align:middle

父元素设置：display:table-cell , text-align:center , vertical-align:middle

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.inner{
	background-color: yellow;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
</div>

在这里插入图片描述

        方法三：display:flex + align-items:center + justify-content:center

父元素设置：display:flex , align-items:center , justify-content:center

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	display: flex;
	align-items: center;
	justify-content: center;
}
.inner{
	background-color: yellow;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
</div>

在这里插入图片描述

        方法四：dispaly：flex + margin：auto；

父元素设置：display:flex
子元素设置：margin:auto

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	display: flex;
}
.inner{
	background-color: yellow;
	margin: auto;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
</div>

在这里插入图片描述

        方法五：子绝父相

父元素设置：position:relative
子元素设置：position:absolute + left:50% + top50%+transform:translate(-50%,-50%)

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	position: relative;
}
.inner{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background-color: yellow;
}

<div class="outer">
	<span class="inner">
		行内元素1
	</span>
</div>

在这里插入图片描述

二、块级元素

1.水平居中

        方法一：margin: 0 atuo

子元素设置：margin: 0 atuo

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
}
.inner{
	width: 100px;
	height: 100px;
	margin: 0 auto;
	background-color: yellow;
}

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

在这里插入图片描述

        方法二：display:flex + justify-content:center

父元素设置：dispaly:felx + justify-content:center

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	display: flex;
	justify-content: center;
}
.inner{
	width: 100px;
	height: 100px;
	background-color: yellow;
}

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

在这里插入图片描述

        方法三：display:flex + margin: 0 auto;

父元素设置：display:flex
子元素设置：margin:0 atuo

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	display:flex;
}
.inner{
	width: 100px;
	height: 100px;
	background-color: yellow;
	margin: 0 auto;
}

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

在这里插入图片描述

        方法四：子绝父相

父元素设置：position:relative
子元素设置：position:absolute + left:50% + transform:translate(-50%)

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	position: relative;
}
.inner{
	width: 100px;
	height: 100px;
	background-color: yellow;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

在这里插入图片描述

2.垂直居中

        方法一：display:flex + algin-items:center

父元素设置：display:flex + algin-items:center

<style>
	.outer{
		width: 200px;
		height: 200px;
		background-color: #bfa;
		display: flex;
		align-items: center;
	}
	.inner{
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
</style>

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

在这里插入图片描述

        方法二：display:flex + margin:auto 0

父元素设置：display:flex
子元素设置：display:flex + margin:auto 0

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	display: flex;
}
.inner{
	width: 100px;
	height: 100px;
	background-color: yellow;
	margin: auto 0;
}

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

        方法三：子绝父相

父元素设置：position:relative
子元素设置：position:absolute + top:50% + transform:translateY(-50%)

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	position: relative;
}
.inner{
	width: 100px;
	height: 100px;
	background-color: yellow;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

3.水平垂直居中

        方法一：display:flex + algin-items:center + justify-content

父元素设置：display:flex + algin-items:center + justify-content

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	display: flex;
	justify-content: center;
	align-items: center;
}
.inner{
	width: 100px;
	height: 100px;
	background-color: yellow;
}

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

        方法二：display:flex + margin: auto;

父元素设置：display:flex
子元素设置：margin: auto

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	display: flex;

}
.inner{
	margin: auto;
	width: 100px;
	height: 100px;
	background-color: yellow;
}

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

        方法三：子绝父相

父元素设置：position:relative
子元素设置：position:absolute + top:50% + left:50% + transform:translate(-50%,-50%)

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	position: relative;

}
.inner{
	width: 100px;
	height: 100px;
	background-color: yellow;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

        方法四：子绝父相2

父元素设置：position:relative
子元素设置：position:absolute + top:0 + bottom:0 + left:0 + right:0 + margin:auto

.outer{
	width: 200px;
	height: 200px;
	background-color: #bfa;
	position: relative;

}
.inner{
	width: 100px;
	height: 100px;
	background-color: yellow;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

<div class="outer">
	<div class="inner">
		块级元素1
	</div>
</div>

三、关于display:table-cell和margin的说明

        display:table-cell:

父元素设置dispaly:table-cell，[text-align:center]，[vertical-align:middle]，子元素设置dispaly：inline-block。可以实现行内元素，块级元素的水平居中，垂直居中，水平垂直居中；但是这种方式改变了父元素和子元素的性质

        margin:

  1. 当元素脱离默认文档流时（浮动，绝对定位，固定定位）,margin失效
  2. 给inline-block和inline设置margin:0 auto时是没用的
码上游
关注
  • 3
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
行内元素与块级元素居中方法
qq_41884544的博客
03-02 5098
一、行内元素 1. 水平居中 方法一：text-algin:center 父元素设置：text-align:center 说明： text-align只能对行内元素起作用，对块级元素不起作用 text-align会被后代元素继承 <style> .outer{ width: 200px; height: 200px; background-color: #bfa; text-align:center; } </style> <div class="
css垂直水平居中方法，行内以及块元素垂直水平居中
qq_26889291的博客
08-13 301
css垂直水平居中方法，行内以及块元素垂直水平居中
2024年网络安全最新垂直水平居中小技巧_inline-block不设置高度如何垂直居中(1)，2024年最新保洁阿姨看完都会了
2401_84301948的博客
05-12 1037
在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。需要完整版PDF学习资源私我。
一文搞定css居中方式
weixin_47121832的博客
02-12 2967
css居中方式大总结
【HTML-CSS】总结-6种实现元素 上下左右居中 方法--附演示效果
m0_61486963的博客
09-13 3898
这就是一篇 HTML+CSS 页面上下左右居中--实现方法总结
css-行内块/行内元素与文字垂直居中对齐
qq_39111074的博客
08-24 2924
css属性vertical-align: 可以定义行内块元素或者行内元素和文字的对齐方式， 常用于图片/表单和文字垂直居中对齐 注意：vertical-align对块级元素无效 vertical-align：baseline; - - -基线对齐（不写默认是基线对齐） vertical-align：bottom; - - -底线对齐 vertical-align：middle; - - -中线对齐 vertical-align：top; - - -顶线对齐 代码示例： <!DOCTYPE ht
CSS行内元素和块级元素的居中实例分析
09-25
在CSS布局中，行内元素和块级元素的居中处理是常见的需求，尤其是在网页设计中。本篇文章将深入探讨这两种元素的居中方法，并通过具体实例进行详细讲解。 首先，我们来了解一下行内元素和块级元素的基本概念。行内...
给行内块元素设置行高无法垂直居中.zip
10-25
6. 使用 CSS3 的伪元素技巧：创建两个相对定位的伪元素，分别位于元素的顶部和底部，设置与元素相同高度的负外边距，可以实现居中效果。 每种方法都有其适用场景和优缺点，开发者应根据项目需求选择合适的方法。在...
CSS实现元素居中原理解析
09-22
在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。这篇文章主要介绍了CSS实现元素居中原理解析，本文分别从行内元素和块级元素进行说明，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS水平居中总结(新手必看篇)
09-24
在CSS布局中，水平居中是一项常见的需求，无论是对行内元素还是块状元素，都有多种方法可以实现。本文将详细讲解如何使用CSS使元素水平居中，特别适合初学者理解掌握。 首先，我们来看一下如何使行内元素如文本、...
如何使定义了高度和宽度的< a >里的文字垂直居中【实现代码】
09-27
`将`<a>`标签转换为块级元素或行内块级元素。 5. 使用`text-align: center;`使文字水平居中。 6. 关键步骤：设置`line-height`等于`height`，以实现垂直居中。 通过以上方法，我们可以确保`<a>`标签内的文字在任何...
利用vertical-align:middle实现行内元素的水平垂直居中对齐
12-13
最终实现效果为实现行内元素的水平、垂直居中对齐，效果图如下：   接下来为实现代码： 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ /> <title> 利用vertical-align实现图片垂直居中对齐 </title> <style> #content { position:absolute; top:0;right:0;bottom:0;left:0; margin:auto;
块级元素和行内元素，以及行内块元素
zy的博客
01-11 1462
目录 讲解： CSS中规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 1. 块级元素 2. 行内元素 3. 行内块级元素 4. 显示模式的转换 讲解： CSS中规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成.
CSS中实现块级元素水平居中的N种方法
热门推荐
phenix323的博客
07-28 1万+
CSS中实现块级元素水平居中的N种方法： CSS中的居中可分为水平居中和垂直居中。 水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。 下面详细介绍这几种情况。 一、水平居中 1、行内元素居中 顾名思义，行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素， 可通过给父元素设置 text-align:center 来实现。 另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。 但有个首要条件是
div与span（块元素与行内元素的区别）
WiseGirls的博客
09-16 2622
div与span div简介 div (division )简单而言是一个区块容器标记.即<div>与</div>之间相当于一个容器,可以容纳段落、标题、表格、图片等各种html元素，因此可以把<div>与</div>中的内容视为一个独立的对象，用于CSS控制,声明时只要对div进运行相应的控制，其中的各个标记元素都会因此而改变. span简介 span标记与div标记一样.作为容器标记而被广泛应用在html语言中，在<span>与 </sp
html里设置行内块元素居中显示,css怎么让元素居中？
weixin_30193461的博客
06-07 847
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。那么css怎么让元素居中？下面本篇文章就来给大家介绍一下css让元素居中的方法，希望对大家有所帮助。水平和垂直方向都可居中统一HTML代码：相同的css代码抽取：.inner{width: 50px;height: 50px;background-color: aqua;}.oute...
行内元素和块元素垂直水平居中
2197
08-14 264
1）行内元素居中 1&gt;给行内元素的父元素设置 text-align:center;//行内元素水平垂直 height:20px line-height:20px;//行内元素垂直居中 原理：line-height和font-size的计算之差分为两半，分别加在文本行内的顶部和底部，实现居中 2&gt;父元素设置display:table,行内元素设置display:table-ce...
前端基础学习笔记 图片、元素、行内块的居中对齐
勤能补拙
11-24 500
  图片对齐 首先看文本居中方式： 上下居中：给文字一个line-height,最好和文字盒子大小相同。 左右居中：给文字一个text-align:center; 考虑到文字与图片对齐用到基线对齐，所以图片在盒子里居中的方式为： text-align和line-height放在父级元素里，在img标签里放与行内元素基线对齐。 ​div{ width:200px; h...
行内元素转换块级元素
最新发布
05-22
行内元素转换为块级元素是一种常见的HTML/CSS技巧，可以用来控制页面元素的布局和样式。具体的方法如下： 1. 使用CSS的display属性来设置行内元素为块级元素，方法是将display属性的值设置为“block”或“inline-block”。 例如，将一个<a>标签转换为块级元素的CSS代码可以写成： ``` a { display: block; } ``` 2. 使用HTML的标签替换原有的行内元素，例如将<a>标签替换为<div>标签，<span>标签替换为<p>标签等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上游

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值