行内元素与块级元素居中方法

最新推荐文章于 2024-09-27 22:57:44 发布
最新推荐文章于 2024-09-27 22:57:44 发布
阅读量5.2k 收藏 42
点赞数 11
分类专栏： HTML&CSS 文章标签： css css3 html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41884544/article/details/114282658
版权

一、行内元素

前言：觉得之前写的那篇关于水平居中、垂直居中、水平垂直居中的博客写的不太好，所以又整理了一遍。
之前博客的地址

1. 水平居中

方法一：text-algin: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 + position:absolute + left:50% + transform:translateX(-50%)

父元素设置：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>

在这里插入图片描述

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 + position:absolute + top:50% + transform:translateY(-50%)

父元素设置：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

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

在这里插入图片描述

方法四：多个子级行内元素，使用vertical-align

说明：

  1. vertical-algin是用来设置行内元素垂直对齐的方式
  2. 该属性定义行内元素的基线相对于该元素(设置了vertical-algin的元素)所在行的基线的垂直对齐方式。在表格中，这个属性会设置单元格框中的单元格内容的对齐方式。
  3. 只有元素是inline-block和inline的时候，设置vertical-algin才会起作用
  4. 我们需要更理解vertical-align才能使用好这个属性，以下两个博客可以帮助我们更好的理解
    vertical-align到底怎么用
    关于Vertical-Align你需要知道的事情
.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/zhongchou.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% + top:50% + transform:translate(-50%,-50%);

父元素设置：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:translateX(-50%)

父元素设置：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>

在这里插入图片描述

方法五：position:relative + position:absolute + left:0 + right:0 + margin 0 auto;

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

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

<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%)

父元素设置：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>

方法四：position:relative + position:absolute + top:0 + bottom:0 + margin:auto 0

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

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

<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%)

父元素设置：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>

方法四：position:relative + position:absolute + top:0 + bottom:0 + left:0 + right:0 + margin:auto

父元素设置：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. 后续会写一篇关于水平方向上的七个属性以及浮动时水平方向上的属性的博客
一只小青锐
关注
专栏目录
【学习笔记】块级元素水平垂直居中方法
weixin_30678821的博客
04-01 548
本文以<div>元素为例 本文转载 1.已知块级元素的宽和高，使用绝对定位absolute和外边距实现水平垂直居中。 父元素position:relative，子元素position:absolute;top:50%;left:50%;margin-top:-height/2;margin-left:-width/2; （思想：先把块级元素中的左上角定位到父元素的中心，然后再向...
CSS行内元素和块级元素的居中实例分析
12-13
2. **块级元素居中**： - **方法1**：将块级元素（如`<div>`）放入`<table>`中，然后将`table`的`margin-left`和`margin-right`都设置为`auto`。虽然这种方法可以实现居中，但不推荐，因为它违背了语义化HTML的原则...
块级元素以及行内元素居中显示
On The Way
03-30 4233
方法一：利用绝对定位实现元素垂直，水平居中显示：<html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; border: 0; } #container{
怎么让行级元素居中并上端对齐（照片和文字）
最新发布
qq_65439696的博客
09-27 138
首先在body里面创建一个<img src="">,然后在<head>里面用元素选择器进行操作~即vertical-align: text-top;【居中只需要写vertical-align: middle;行级元素换行：span元素选择器white-space: pre;
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2162
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
行内元素和块级元素如何居中
Y0admin的博客
10-27 1095
1.水平居中： （1）行内元素： 对该行内元素的父元素设置text-align:center （2）块级元素： 对该块级元素设置margin:0 auto （3）弹性盒子中的水平居中： 将某元素定义为弹性盒子：display:flex; 然后在水平方向居中盒子内的元素：justify-content:center; 2.垂直居中： （1）行内元素： 方法一：对该行内元素的父元素设置line-heig...
CSS常用的块级元素居中的方法
qq_43204488的博客
12-22 421
方法一：弹性盒模型 <div class="box1"></div> <div class="box2"></div> .box1{ display:flex; justify-content: cneter;// x轴居中 align-items: center;//y轴居中 } 方法二：绝对定位和相对定位 1.子元素使用margin:auto...
html中的行内元素和块级元素有哪些.pdf
05-08
行内元素是指在一行中可以与其他元素共存的元素。它们不占据独立的矩形空间，而是依附于其他块级元素存在的。因此，对行内元素设置高度、宽度、内外边距等属性都是无效的（置换元素除外）。 常见的行内元素有： * ...
对行内元素和块级元素的一些认识
09-24
在网页布局和设计中，了解行内元素和块级元素是非常基础且重要的概念。行内元素和块级元素是HTML中的两种主要元素类型，它们的行为和样式应用上有显著的差异，直接影响到页面的布局和内容展示。 首先，我们来看一下...
CSS：行内元素与块级元素的转换与居中方法
相反，行内元素（Inline Elements）如`span`, `strong`等，它们只占据自身的宽度，与其他元素并排显示，不换行。行内元素通常不能设置高度和宽度，但可以设置行高和边距。要使行内元素表现为块元素，可以将其`...
块元素行内元素水平垂直居中方式
xy_is_fhh的博客
11-19 1984
水平居中： ①行内元素(或行内块元素)包含在块元素里时可将元素看作是父元素中的文本，父元素(块元素设置text-align:center;) ②1.块元素定宽时，设置margin: auto;即可实现水平居中 ②2.块元素定宽时，设置position定位实现水平居中 垂直居中： 对应① 设置height=line-height;即可实现行内元素在块元素中垂直居中效果 对应②2. 同理设置position定位实现块元素垂直居中 flex布局水平垂直居中方式
行内元素居中
weixin_33671935的博客
08-17 101
行内元素居中,通用处理办法 给父元素添加一个行内块级元素,高度100%,且vertical-align设置为middle; 所有的子元素vertical-align都设置为middle; <!DOCTYPE html> <html> <head> ...
块级元素在块级别元素中居中
heartAndthink的博客
08-31 981
引言: 通常情况下块级元素重置居中有两种方式 1.利用margin值 2.利用定位和负边距 但是一次我遇到这种情况(子块级元素高度是自适应的，高度值不确定)，以上方法就不好使了，改怎么解决呢 答案是:父元素属性设置为    display：table-cell  ,  vertical-align:middle; display: 
CSS - 行内元素水平居中
热门推荐
seaalan的博客
04-29 1万+
方法一：父级设置 text-align : center; .parent { text-align: center; } .parent > div{ text-align: left; } <div class="parent"> <div>行内元素水平居中方法一：父级设置 text-align : center;</div&g...
CSS笔记 行内元素居中
yogur_father的博客
11-19 146
一.行内元素居中 只要我们将行内的元素放在父盒子中 然后父盒子使用text-align： center 就可以了 * { padding: 0px; margin: 0px; } /* 关键 */ .father { text-align: center; } .father a { display: inline-block; text-decoration: none; width: 50px; height: 50px; line-
块元素&行内元素水平垂直居中
webshady的博客
04-15 170
一、块元素水平垂直居中方法 方法1： 方法2： 方法3： 方法4： 二、行内元素水平垂直居中 方法1： 方法2：
谈谈行内元素和块元素的区别和居中问题
懒猫慧慧
03-13 1144
行内元素，也叫内联元素、内嵌元素等，是众多的行内元素能在一行中显示的元素。行内元素的主要作用是用来添加特殊样式，如元素，元素，元素，，下标 上标等等。 块元素，就是会独占一行的元素，比如，等等。          行内元素和块元素的区别如下：      行内元素 块级元素 默认开始位置 和其他元素都在一行上 总是在新行上开始 宽度 宽度就是它的
css-行内块/行内元素与文字垂直居中对齐
qq_39111074的博客
08-24 3044
css属性vertical-align: 可以定义行内块元素或者行内元素和文字的对齐方式， 常用于图片/表单和文字垂直居中对齐 注意：vertical-align对块级元素无效 vertical-align：baseline; - - -基线对齐（不写默认是基线对齐） vertical-align：bottom; - - -底线对齐 vertical-align：middle; - - -中线对齐 vertical-align：top; - - -顶线对齐 代码示例： <!DOCTYPE ht
行内元素和行内块元素水平居中
pinkowonote的博客
08-07 368
行内元素和行内块元素水平居中，只需要给他们的父亲设置text-align：center
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值