AI 助理
备案控制台
开发者社区 云原生 文章 正文

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

2024-07-08 69
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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元素
CSS自适应
CSS图片
CSS图标
CSS文本
朝阳39
目录
相关文章
john散漫
|
4天前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果？
在上述代码中，定义了一个名为 `fade-in` 的CSS类，其初始透明度为0，并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时，元素的透明度变为1，实现淡入效果；当再次点击按钮移除 `active` 类时，元素又会逐渐淡出。通过这种方式，可以根据用户的操作灵活地控制元素的淡入淡出效果。
john散漫
37 3
dufadayang
|
30天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader，可以实现对这些资源的精细处理和优化，提升项目的性能和用户体验。在实际应用中，需要不断探索和实践，根据项目的具体情况进行灵活调整和优化，以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握，你将能够更好地应对各种复杂的资源处理需求，为项目的成功构建和运行提供坚实的基础。
dufadayang
52 1
你都不懂
|
21天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
你都不懂
22 0
神明木佑
|
1月前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
神明木佑
89 0
Li370234940
|
1月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
Li370234940
39 0
你真的不认识我了
|
2月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
你真的不认识我了
55 11
花非花雾非雾11
|
2月前
|
前端开发
css中的多行省略和单行省略
css中的多行省略和单行省略
花非花雾非雾11
46 5
你都不懂
|
3月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
你都不懂
29 5
Yaiba123
|
3月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标，有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果，并提供了详细的实现代码和效果演示。
Yaiba123
69 0
使用Vue+CSS实现汉堡图标过渡为叉号图标，有点意思
wljslmz
|
3月前
|
存储 前端开发
为 HTML 元素指定 CSS 样式的方式
【8月更文挑战第24天】
wljslmz
73 0

热门文章

最新文章

  • 1
    CSS3实现多样的边框效果
  • 2
    Css基本样式————字体
  • 3
    CSS3-实现单选框radio的小动画
  • 4
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 5
    纯CSS3实现宽屏二级下拉菜单
  • 6
    CSS3实现时间轴效果
  • 7
    05.javascript访问CSS
  • 8
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 9
    CSS伪元素实现的3D按钮
  • 10
    CSS3中的选择器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    66
  • 2
    技术心得：xpath、CSS定位方法
    45
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    156
  • 4
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    140
  • 5
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    49
  • 6
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    70
  • 7
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    152
  • 8
    使用HTML和CSS创建响应式表格
    165
  • 9
    常见的css优化方案都有那些
    50
  • 10
    CSS对行级元素的影响
    36

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云OSS设置跨域访问