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

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

2024-07-08 138
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
html的七十二变
|
1月前
|
前端开发
在Webpack配置文件中，如何配置loader以处理其他类型的文件，如CSS或图片
在Webpack配置文件中，通过设置`module.rules`来配置loader处理不同类型的文件。例如，使用`css-loader`和`style-loader`处理CSS文件，使用`file-loader`或`url-loader`处理图片等资源文件。配置示例：在`rules`数组中添加对应规则，指定`test`匹配文件类型，`use`指定使用的loader。
html的七十二变
55 6
哈你真皮
|
5天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序，按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
哈你真皮
19 2
众所周知
|
27天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画，这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动，增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析，旨在为设计师和开发者提供实用指导。
众所周知
53 7
东方睿赢
|
27天前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论，旨在帮助开发者更好地理解和运用媒体查询，提升移动端用户体验。
东方睿赢
44 4
疯狂的猿
|
29天前
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
疯狂的猿
18 0
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
asing1elife
|
前端开发
CSS文本加省略号
版权声明：本文首发 http://asing1elife.com ，转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82766836 ...
asing1elife
973 0
木头先生
|
前端开发 弹性计算
css文本超出2行就隐藏并且显示省略号
首先，要知道css的三条属性。 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 这三个是css的基础属性，需要记得。
木头先生
4529 0
浣熊干面包
|
前端开发 容器 JavaScript
如何仅通过CSS实现多行文本超长自动省略号
浣熊干面包
1753 0
行者武松
|
前端开发
如何用CSS实现多行文本的省略号显示
行者武松
1558 0
涂作权
|
前端开发
当内容超出最大的长度的时候，使用CSS使文本显示省略号
.description{  height:17px;  overflow:hidden;  text-overflow:ellipsis;  -webkit-text-overflow:ellipsis;  -o-text-overflow:ellipsis;  white-space:nowrap; }
涂作权
1170 0