CSS【详解】对齐（含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）-阿里云开发者社区

CSS【详解】对齐（含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）

2024-07-08 1242

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS【详解】对齐（含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）

vertical-align 文本垂直对齐

只对 display 的计算值为 inline、inline-block，inline-table 或 table-cell 的内联元素有效。（浮动和绝对定位会让元素块状化，从而导致 vertical-align 失效）

属性值

线类，如baseline（默认值-基线对齐）、top（顶部对齐）、middle（居中对齐）、bottom（底部对齐）；

基线对齐

在文本之类的内联元素，基线是字母x的下边缘

对于图片等替换元素，基线为元素本身的下边缘

一个inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘；如果里面有内联元素，则其基线是元素里最后一行内联元素的基线。

文本类，如text-top、text-bottom；

上标下标类，如sub、super；

数值类，正值或负值，如-80px、20px、2em等。

负值全部都是往下偏移，正值全部都是往上偏移，而且数值大小全部都是相对于基线位置计算的，因此，从这一点来看，vertical-align:baseline等同于vertical-align:0。

由于是相对字母x的下边缘对齐，而中文和部分英文字形的下边缘要低于字母x的下边缘，因此，会给人感觉文字是明显偏下的，一般都会进行调整。比方说，我们给文字内容设置vertical-align:10px，则文字内容就会在当前基线位置再往上精确偏移10px

百分比类，正值或负值，如20%等，vertical-align属性的百分比值则是相对于line-height的计算值计算的，但很少使用。

【演示】文本和图片垂直方向对齐

要点：在图片上设置 vertical-align 样式

https://www.runoob.com/try/try.php?filename=trycss_vertical-align

text-align 文本水平对齐

在容器上添加样式

属性值

值	描述
left 【默认】	把文本排列到左边。
right	把文本排列到右边。
center	把文本排列到中间。
justify	文本两端对齐

<div style="border: 1px solid red; text-align: center">你好</div>

【实战】单行文本垂直居中

行高 = 容器高度

<div style="border: 1px solid red;height: 50px;line-height:50px;" >
你好
</div>

【实战】多行文本垂直居中

借助 CSS 的 行距上下等分机制 ，利用行高实现。

<template>
  <div class="box">
    <div class="content">
      很久很久以前，门口有座山，山上有座庙，庙里有一老一少两个和尚。有一天，老和尚给小和尚讲了一个故事。
    </div>
  </div>
</template>

<style scoped>
.box {
  /* 使用的line-height，而不是 height */
  line-height: 120px;
  background-color: greenyellow;
}
.content {
  /* 将内容变为行内块元素 */
  display: inline-block;
  /* 行内垂直居中 */
  vertical-align: middle;
  line-height: 20px;
  margin: 0 20px;
}
</style>

实战】块级元素水平居中

左右外边距都设置为 auto

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>

<style scoped>
.parent {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

.child {
  background-color: green;
  height: 60px;
  width: 60px;
  margin: 0 auto;
}
</style>

【实战】块级元素水平垂直居中

方案：flex布局

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>

<style scoped>
.parent {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  /* 样式都写在容器-父元素上 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: green;
  height: 60px;
  width: 60px;
}
</style>

多行块级元素的水平垂直居中

<template>
  <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</template>

<style scoped>
.parent {
  border: 1px solid red;
  height: 200px;
  width: 100px;
  /* 样式都写在容器-父元素上 */
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.child1 {
  background-color: blue;
  height: 60px;
  width: 60px;
}

.child2 {
  background-color: green;
  height: 60px;
  width: 60px;
}
</style>

方案：flex布局 + 自动外边距

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>

<style scoped>
.parent {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  display: flex;
}

.child {
  background-color: green;
  height: 60px;
  width: 60px;
  margin: auto;
}
</style>

方案：单元格布局 + 自动水平外边距

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>

<style scoped>
.parent {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  /* 父元素内采用单元格布局 */
  display: table-cell;
  /* 子元素-垂直居中 */
  vertical-align: middle;
}

.child {
  background-color: green;
  height: 60px;
  width: 60px;
  /* 子元素-水平居中 */
  margin: 0 auto;
}
</style>

方案：子绝父相 + 上下左右0 + 自动外边距

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>

<style scoped>
.parent {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  /* 容器-父元素相对定位 */
  position: relative;
}

.child {
  background-color: green;
  height: 60px;
  width: 60px;
  /* 子元素绝对定位 */
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>

方案：子绝父相 + `transform: translate`

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>

<style scoped>
.parent {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  /* 容器-父元素相对定位 */
  position: relative;
}

.child {
  background-color: green;
  height: 60px;
  width: 60px;
  /* 子元素-绝对定位 */
  position: absolute;
  /* 子元素的左上角下移到垂直方向的中点 */
  top: 50%;
  /* 子元素的左上角右移到水平方向的中点 */
  left: 50%;
  /* 子元素向左，向上移动自身宽高的一半 */
  transform: translate(-50%, -50%);
}
</style>

方案：子绝父相 + margin 偏移

仅适用于子元素有明确宽高的情况，因需手动计算偏移距离，不推荐使用。

<template>
  <div class="parent">
    <div class="child"></div>
  </div>
</template>

<style scoped>
.parent {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  /* 容器-父元素相对定位 */
  position: relative;
}

.child {
  background-color: green;
  height: 60px;
  width: 60px;
  /* 子元素-绝对定位 */
  position: absolute;
  /* 子元素的左上角下移到垂直方向的中点 */
  top: 50%;
  /* 子元素的左上角右移到水平方向的中点 */
  left: 50%;
  /* 子元素向上移动自身高度的一半 */
  margin-top: -30px;
  /* 子元素向左移动自身宽度的一半 */
  margin-left: -30px;
}
</style>

【实战】图片在 div 内水平垂直居中

方案：flex布局

父元素采用 flex布局后，img 的 display 变成了 block

<template>
  <div class="box">
    <img src="./ecLogo.jpg" height="60" />
  </div>
</template>

<style scoped>
.box {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

方案：flex布局 + 自动外边距

<template>
  <div class="box">
    <img src="./ecLogo.jpg" height="60" />
  </div>
</template>

<style scoped>
.box {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  display: flex;
}

img {
  margin: auto;
}
</style>

方案：单元格布局 + 文本水平居中

<template>
  <div class="box">
    <img src="./ecLogo.jpg" height="60" />
  </div>
</template>

<style scoped>
.box {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
</style>

方案：子绝父相 + 上下左右0 + 自动外边距

<template>
  <div class="box">
    <img src="./ecLogo.jpg" height="60" />
  </div>
</template>

<style scoped>
.box {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  position: relative;
}

img {
  position: absolute;
  /* 子元素绝对定位 */
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>

方案：子绝父相 + `transform: translate`

<template>
  <div class="box">
    <img src="./ecLogo.jpg" height="60" />
  </div>
</template>

<style scoped>
.box {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  position: relative;
}

img {
  position: absolute;
  /* 子元素绝对定位 */
  position: absolute;
  /* 子元素的左上角下移到垂直方向的中点 */
  top: 50%;
  /* 子元素的左上角右移到水平方向的中点 */
  left: 50%;
  /* 子元素向左，向上移动自身宽高的一半 */
  transform: translate(-50%, -50%);
}
</style>

方案：子绝父相 + margin 偏移

仅适用于子元素有明确宽高的情况，因需手动计算偏移距离，不推荐使用。

<template>
  <div class="box">
    <img src="./ecLogo.jpg" height="60" />
  </div>
</template>

<style scoped>
.box {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  position: relative;
}

img {
  position: absolute;
  /* 子元素绝对定位 */
  position: absolute;
  /* 子元素的左上角下移到垂直方向的中点 */
  top: 50%;
  /* 子元素的左上角右移到水平方向的中点 */
  left: 50%;
  /* 子元素向上移动自身高度的一半 */
  margin-top: -30px;
  /* 子元素向左移动自身宽度的一半 */
  margin-left: -30px;
}
</style>

方案：行高与容器等高 + 文本垂直居中对齐

<template>
  <div class="box">
    <img src="./ecLogo.jpg" height="60" />
  </div>
</template>

<style scoped>
.box {
  border: 1px solid red;
  height: 100px;
  width: 100px;
  text-align: center;
  line-height: 100px;
}

img {
  vertical-align: middle;
}
</style>

【实战】文本自适应对齐

文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐

https://blog.csdn.net/weixin_41192489/article/details/114647286

【实战】图标和文本对齐

https://blog.csdn.net/weixin_41192489/article/details/112384315

文字和图标垂直居中对齐（四种方法）
https://blog.csdn.net/weixin_41192489/article/details/115218875
使用ex实现文本与图标对齐
https://blog.csdn.net/weixin_41192489/article/details/115187975

【实战】图片和文本对齐

https://blog.csdn.net/weixin_41192489/article/details/112467616

CSS【详解】对齐（含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）

vertical-align 文本垂直对齐

【演示】文本和图片垂直方向对齐

text-align 文本水平对齐

【实战】单行文本垂直居中

【实战】多行文本垂直居中

实战】块级元素水平居中

【实战】块级元素水平垂直居中

方案：flex布局

多行块级元素的水平垂直居中

方案：flex布局 + 自动外边距

方案：单元格布局 + 自动水平外边距

方案：子绝父相 + 上下左右0 + 自动外边距

方案：子绝父相 + `transform: translate`

方案：子绝父相 + margin 偏移

【实战】图片在 div 内水平垂直居中

方案：flex布局

方案：flex布局 + 自动外边距

方案：单元格布局 + 文本水平居中

方案：子绝父相 + 上下左右0 + 自动外边距

方案：子绝父相 + `transform: translate`

方案：子绝父相 + margin 偏移

方案：行高与容器等高 + 文本垂直居中对齐

【实战】文本自适应对齐

【实战】图标和文本对齐

【实战】图片和文本对齐

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）

vertical-align 文本垂直对齐

【演示】文本和图片垂直方向对齐

text-align 文本水平对齐

【实战】单行文本垂直居中

【实战】多行文本垂直居中

实战】块级元素水平居中

【实战】块级元素水平垂直居中

方案：flex布局

多行块级元素的水平垂直居中

方案：flex布局 + 自动外边距

方案：单元格布局 + 自动水平外边距

方案：子绝父相 + 上下左右0 + 自动外边距

方案：子绝父相 + transform: translate

方案：子绝父相 + margin 偏移

【实战】图片在 div 内水平垂直居中

方案：flex布局

方案：flex布局 + 自动外边距

方案：单元格布局 + 文本水平居中

方案：子绝父相 + 上下左右0 + 自动外边距

方案：子绝父相 + transform: translate

方案：子绝父相 + margin 偏移

方案：行高与容器等高 + 文本垂直居中对齐

【实战】文本自适应对齐

【实战】图标和文本对齐

【实战】图片和文本对齐

热门文章

最新文章

相关课程

相关电子书

CSS【详解】对齐（含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）

方案：子绝父相 + `transform: translate`

方案：子绝父相 + `transform: translate`