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

已于 2024-08-26 15:34:46 修改
阅读量1.9k 收藏 12
点赞数 41
分类专栏： # CSS 文章标签： css
于 2024-07-08 10:45:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41192489/article/details/140255028
版权

内联元素

display 的计算值为 inline、inline-block，inline-table 或 table-cell 的元素（ 浮动和绝对定位会让元素块状化）

水平对齐 text-align

  • 在容器上添加样式

属性值

值描述
left 【默认】把文本排列到左边。
right把文本排列到右边。
center把文本排列到中间。
justify文本两端对齐
<div style="border: 1px solid red; text-align: center">你好</div>

在这里插入图片描述

垂直对齐 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

行高 = 容器高度

可用于单行文本垂直居中

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

在这里插入图片描述

块级元素

块级元素水平居中

左右外边距都设置为 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>

方案：grid 布局

  /* 样式都写在容器-父元素上 */
  display: grid;
  justify-content: center;
  align-items: center;

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

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

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

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

朝阳39
关注
专栏目录
CSS在固定宽高的div内实现垂直居中的实例详解
09-24
主要介绍了CSS在固定宽高的div内实现垂直居中的实例详解,即在div内部元素相对于div垂直居中的方法,需要的朋友可以参考下
CSS垂直居中的另类实现代码详解(不走寻常路)
11-19
这个方法在某些情况下能提供一个简洁的解决方案，尤其是在处理单个内联块级元素的垂直居中时。不过，对于更复杂的布局，可能需要结合其他布局技术如Flexbox或Grid来实现更为灵活和兼容的垂直居中。
css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
12-10
这两天写个页面css的时候用到了vertical-align属性，使用过程中踩到了坑，所以总结如下： 1.vertical-align的语法 vertical-align属性的具体定义列表如下： 语法： vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <长度> | inherit 说明： 设置元素内容的垂直对齐方式 值： baseline：基线对齐；sub：下标；super：上标；top：顶端对齐；text-top：与文本的顶端对齐；middl
前端必知必会-CSS 布局水平和垂直对齐
最新发布
qq_24018193的博客
08-22 1780
本文介绍了的CSS 布局水平和垂直对齐使用，如有问题欢迎私信和评论。
CSS制作水平垂直居中对齐
Polaris
06-29 3913
作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋呀，要正确的选择也是一件不容易的事情。我会将这几种方法一一介绍给大家，以供大家参考。或许对于我这样的初学者有一定的帮助。 用CSS来实现元素的垂直居中效果是件苦差事，虽然说实现方法有多种，但有很多
CSS 文本垂直居中对齐
weixin_30823227的博客
05-22 115
　　文本垂直居中对齐是一个很常见的问题，这里总结一下。 　　一、容器高度固定，单行文本垂直居中对齐 height:20px; line-height:20px; overflow:hidden; 　　二、容器高度固定，多行文本垂直居中对齐 padding-top:10px; padding-bottom:10px; line-height:20px; ...
htmlCss----Day2(vertical-align)
weixin_45170547的博客
11-04 346
vertical-align - 指定行内元素（inline）或表格单元格（table-cell）元素的 - 行内元素的值 相对父元素的值 这些值使元素相对其父元素垂直对齐： baseline /* 使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线，如<textarea> ，这意味着这些元素使用此值的表现因浏览器而异。 */ sub /* 使元素的基线...
CSS块级与行内元素转换与居中技巧详解
本文主要讨论了CSS中关于行元素和块元素的转换以及如何实现居中对齐。行元素，如`<span>`和`<strong>`，默认情况下表现为行内元素，它们的内容显示在同一行中，高度和宽度由内容决定。而块级元素，如`<div>`、`<h1>`...
Float 菜单水平居中简单方法
09-25
在传统的浮动布局中，让浮动元素水平居中并不直观，因为`float`属性本身并不支持居中对齐。通常会使用其他技术，例如设置负边距、使用绝对定位或者利用`display:table`等方法。然而，这种方法往往比较复杂，涉及到更...
CSS居中技巧详解：8种实现方式
在CSS中，实现元素的居中对齐是网页布局中的常见需求。本文将详细探讨8种不同的居中方法，包括水平居中、垂直居中以及组合的水平垂直居中。每种方法都有其适用场景和优缺点，开发者可以根据实际需求选择合适的方法。...
css - 垂直对齐
weixin_30480651的博客
10-03 915
css - 垂直对齐 非原生行内块 为了方便叙述，我们把转换为行内块的元素称为非原生行内块元素 单行/多行元素 在学习垂直对齐前，需要先把在一行上显示的元素分出两个概念，一个是单行元素，另一个是多行元素。单行元素有：input、button、span、a等，多行元素有：非原生的行内块、textarea、img等。而我们知道元素的顶线就是其顶部、底线是其底部，中线是其中部，但其基线...
css垂直对齐
qq_42681882的博客
09-15 391
文本的垂直对齐 IFC 布局规则: 在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始 盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐. 行盒 line-box 每个行盒会产生一个 IFC,IFC 决定了内部的布局规则,并且 IFC 之间不会相互影响内部的布局. 该 p 元素包含了两行,每行有一个 line-box,而每个 line-box 的高度是由他内部所有子元素(inline-box)的高度得出的. 由于 line-box 中的垂直对齐方式是
《CSS世界》笔记三：内联元素与对齐
weixin_33734785的博客
08-07 133
上一篇：《CSS世界》笔记二：盒模型四大家族下一篇：《CSS世界》笔记四：流的保护与破坏 写在前面 在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已。在这一篇博客（《css世界》第五章）中，张大大从深层次解释了垂直对齐的原理，并为内联元素的垂直对齐提供了最佳实践。 一、基本...
css中的垂直对齐（vertical-align）
weixin_30919429的博客
12-31 749
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 垂直对齐只对inline或inline-block元素有效 在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式（内容可以是block元素） 1.基线（baseline） 使用字母x辅助找基线 inline或inline-block基线：在后加一个字符x，x的底部所在位置就是基线位置 父元素基线：在父元素最后加一...
css 元素的垂直对齐方式
AS_TS的博客
08-27 681
vertical-align 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 例如： <td style="display:table-cell; vertical-align:top">{$v.driver_uid|find_driver_name}</td> 值 描述 baseline 默认。元素放置在父元素的基线上。 s
CSS之垂直对齐方式vertical-align
weixin_45604020的博客
07-07 725
有时候我们会遇到图片和文字并排，但是图片靠上而文字靠下摆放布局混乱。因为浏览器将行内块和行内标签都当做文字处理，所有文字默认都按基线（baseline）对齐，图片底下有留白导致不整齐。因此我们引入vertical-align用于解决图片文字垂直方向的摆放方式。
css 设置文本垂直居中
weixin_30339969的博客
12-21 483
css设置文本垂直居中 垂直居中的高必须等于元素的高才能居中 如下图： 代码演示： div{ height:60px; } p{ line-height:60px; /*垂直居中的高必须等于元素的高才能居中*/ } 转载于:https://www.cnblogs.com/luckybaby519/p/10157142.html...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝阳39

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值