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

最新推荐文章于 2024-08-14 11:57:27 发布

腻子防水涂装设备厂家

最新推荐文章于 2024-08-14 11:57:27 发布

阅读量25

点赞数

文章标签： css android 前端

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	文本两端对齐

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

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

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

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

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

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

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

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

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

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

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

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

方案：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>

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

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

<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 内水平垂直居中

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

方案：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>

【实战】文本自适应对齐

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

【实战】图标和文本对齐

文字和图标垂直居中对齐（四种方法）
使用ex实现文本与图标对齐

【实战】图片和文本对齐

原创作者: u_15715491 转载于: https://blog.51cto.com/u_15715491/11457405

腻子防水涂装设备厂家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS【详解】对齐（含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）...

vertical-align 文本垂直对齐只对 display 的计算值为 inline、inline-block，inline-table 或 table-cell 的内联元素有效。（浮动和绝对定位会让元素块状化，从而导致 vertical-align 失效）属性值线类，如baseline（默认值-基线对齐）、top（...
复制链接

扫一扫