CSS 之 vertical-align的垂直方向居中对齐误解

已于 2022-08-08 13:46:55 修改
阅读量292 收藏
点赞数
分类专栏： HTML+CSS 文章标签： css 前端 vertical-align 垂直居中 html5
于 2022-08-07 18:06:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/OnTheRoad_ING/article/details/126214348
版权

vertical-align

mdn上的的解释
在这里插入图片描述

注意
  • 行内元素是没有高度的
  • 是由内容将其撑起来
  • 当一行放不下的时候换行
  • 这里有一个概念叫做行盒

在这里插入图片描述

  • 在一个大盒子里一共有三个行盒
现在删除其他的，只看第一个行盒内

在这里插入图片描述

  • 明显看到图片下边空出一段距离
  • 出现这种情况的原因就是因为vertical-align在影响
    • 默认值是base-line，基线对齐
  • 改变vertical-align为top

在这里插入图片描述

  • 此时图片距离底部的距离消失，同时文本也正常的在顶部
  • 设置值middle

在这里插入图片描述

误解 — vertical-align可以设置 垂直方向的居中

  • 此时并没有真正的居中
  • 这和middle对齐的位置有关，他是和字母x的往上一半对齐
  • 当我们设置一个字体很大的时候非常明显

在这里插入图片描述

  • 可以看到并没有居中对齐
css 为什么很多时候，vertical-align不生效，图片和文字垂直居中对其
PrimaryColor
08-09 2142
很多时候，我们的图片和文字不是垂直居中的一个样式，一般情况都是使用弹性盒子，将垂直对齐居中，不过也可以使用更方便的方法vertical-align来对齐文字和图片。但是当我们设置这个属性的时候，发现并没有什么效果，根本就没有垂直对齐，以下我列举了很多情况不生效的原因。 示例代码： <div style="display:inline;vertical-align:middle;"> 原色<img src='1.jpg'/> </div> 1.如果设置在容器上，不能
为什么设置了vertical-align：middle；内容不会垂直居中
m0_61973028的博客
02-18 1499
遇到问题肯定是急躁的哇~，不要急不要急。耐心看图，看文????。 1、原因一，使用对象错误，你给块元素（block）设置vertical-align：middle；。MDN中明白告知，vertical-align是用来指定行内元素的嗷~。那么解决方案就是display：inline；或者display：inline-block；就可以设置这个元素了。不知道display查css3手册嗷~ 2、原因二，你给需要居中的父元素设置了vertical-align：middle；事实上，是父元素需要垂直居中就
CSS垂直居中问题解决方法
战五渣
09-15 944
在实际运用中，经常需要用到垂直居中的地方主要有一下两种情况： 1、导航栏 导航栏常用到的ul，li标签均为块级元素，a标签为行内元素。要使得a标签的文字垂直居中于li中，只需要a标签的高度与li的高度一致皆可。 然而，a标签是行内元素，不能直接设置其height值，因此，可以选择a的dispaly方式为block，即可为之设置高度line-height。具体代码如下：
{带图片详解}vertical-align: middle,元素垂直居中
ku_tu的博客
11-05 5548
{带图片详解}vertical-align: middle,元素垂直居中,vertical-align介绍
css中vertical-align的理解及应用
Xiao_冬的成长记录
11-06 860
今天在做前端布局练习时，遇到如下图所示布局： 就是将图片水平、垂直居中。提供2种实现方法 首先，了解一下vertical-align，此处参考MDN vertical-align是用来指定行内元素-inline(包括inline-block)或表格单元格（table-cell）元素的垂直对齐方式 比较常见的4种用法： vertical-align: top; vertical-...
css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
12-10
在CSS布局中，垂直对齐是一项重要的任务，用于调整元素在垂直方向上的位置。`vertical-align`属性就是用来实现这一目的的关键。它主要用于控制行内元素（如`<span>`、`<img>`等）和表格单元格（`<td>`）内部内容的...
利用vertical-align:middle实现行内元素的水平垂直居中对齐
09-25
`后，它们将根据对方的基线（对于图片来说，就是底部）来调整自己的位置，使得这两个元素在垂直方向上的中线对齐。 总结来说，`vertical-align: middle;`是一种历史悠久的CSS技巧，可以实现行内元素的垂直居中。它...
使用vertical-align实现input和img对齐
12-14
`vertical-align`属性主要用于设置行内元素或表格单元格内容的垂直对齐方式。它适用于`display`值为`inline`、`inline-block`、`table-cell`、`table-column`、`table-row`、`table-caption`、`inline-table`的元素...
css vertical-align属性的一些理解与认识(一)
09-25
CSS中的`vertical-align`属性是用于控制元素在行内元素（inline elements）或者行内块元素（inline-block elements）中的垂直对齐方式。这个属性在布局设计中扮演着重要角色，尤其是在处理表格、图像、输入框等元素...
vertical-align属性笔记
icessun
03-03 363
定义MDN的定义是：用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式如果元素没有基线baseline，则以它的外边距的下边缘为基线。可替换元素定义（MDN）是：外观渲染独立于css的外部对象，展示不由css来控制。 其中一些元素，如：img，video，input，textarea，本身有尺寸和基线（baseline），就需要使用vertical-align来
简单理解css中的垂直居中和水平居中，即vertical-align和text-align属性
liwusen的博客
04-03 3万+
如何实现父元素内部元素的垂直居中与水平居中，vertical-align和text-align的简单实用方法
vertical-align垂直居中不起作用的原因
清风古韵
02-27 4082
vertical-align:middle 父可以设置行高 或是line 子元素分别设置 vertical-align:middle 子元素必须是行内元素
CSS 垂直对齐vertical-align属性
热门推荐
歪脖先生的博客
02-13 3万+
垂直对齐在CSS中，行框的高度总是足以容纳它包含的所有行内级框，当一个行内级框 B 的高度小于包含它的行框高度时，则由 vertical-align属性 来决定B在行框中垂直对齐的位置。因此，vertical-align属性只对行内级元素有效，对块级元素无效。并且，该属性不能被子元素继承。在垂直对齐时，行内非替换元素的行内级框是由 line-height 的高度定义的框，即在内容区的上下各添加半行...
vertical-align middle 不生效的几种解决方式，图片居中几种方案
weixin_38984030的博客
06-02 4115
1.在父元素中增加display:table-cell，vertical-align 写在在父元素中 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .btn{ display:table-cell; width:200px; height:200px; bo...
css中的vertical-align用法
落日夕霞的博客
08-27 1215
css中的vertical-align用法
el-table设置自定义css
weixin_43869439的博客
05-27 369
【代码】el-table设置自定义css。
vite配置一个css插件
大赚万万亿
05-29 196
该例子只是替换一些css,具体内容不重要,主要看形参的运用。vite.config.js的plugins执行函数。
CSS篇-4
最新发布
m0_60311269的博客
05-30 38
本文摘要： 块级元素独占一行可设宽高，行内元素不独占且宽高由内容决定，行内块元素兼具两者特性； 使用Flex布局实现三栏（左右固定200px，中间自适应）的示例代码； 浮动原理：元素脱离文档流，影响后续元素排版，需注意清除浮动方法； CSS Sprite技术：合并小图减少请求，通过background-position定位； 高效CSS要点：优化选择器性能、减少层级、平衡可读性与效率； 页面重构包括语义化HTML、CSS优化、性能提升和可维护性改进； display:none完全移除元素，visibilit
静态资源js,css免费CDN服务比较
lxc9349的博客
05-29 853
本文对10个主流免费静态资源CDN服务（如BootCDN、jsDelivr、UNPKG等）进行了详细比较，涵盖其特点、局限性及适用场景。国内项目推荐使用BootCDN、Staticfile或Zhimg等国内优化服务，国际项目建议选择jsDelivr或UNPKG。文章还提供了各CDN引入jQuery等库的具体代码示例，并建议国内项目优先考虑访问速度，国际项目侧重资源覆盖，同时强调版本管理和回退机制的重要性。针对不同开发需求（如ES模块化）也给出了专项建议。
理解CSS：vertical-align与line-height实战解析
如果要让它们居中对齐，可以设置`vertical-align: middle;`，同时确保`line-height`足够大以容纳两者之间的空间。 3. 在实际应用中，`vertical-align`常用于处理图像、输入框、表单元素等与文本的对齐问题，而`line...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值