都在同一行为啥对不齐？（vertial-align）

最新推荐文章于 2022-04-18 21:09:38 发布
最新推荐文章于 2022-04-18 21:09:38 发布
阅读量617 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Fimooo/article/details/88687152
博主遇到模拟list - type的div实心方块和标题不对齐的问题，朋友建议在“需要”前加x，发现x和div能对齐但中文不行，原因是vertial - align默认底部基线对齐，而中文基线不在底部，设置统一基线后问题解决。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天遇到一个问题，模拟list-type的div实心方块和标题对不齐…（放大n倍看效果！！哈哈）
在这里插入图片描述
我朋友教我，在“需要”前面加个x试试
然后…
在这里插入图片描述

我发现了，x和div能对齐，但中文却不行。
是因为对准基线的问题，vertial-align的默认值，是底部基线对齐，但中文的基线不在底部，所以出现误差。

设置vertical-align: middle;
统一基线后，再来看效果
在这里插入图片描述

okkkk！完工！

vertical-align图示如下：
在这里插入图片描述

vertical-align属性解决元素间有间隙和对不齐问题--小技巧
JackieDYH的博客
02-19 1481
vertical-align属性： 设置元素的垂直对齐方式 vertical-align: baseline; 将元素放在父元素的基线上 默认值 vertical-align: top; 顶端对齐 vertical-align: middle; 中部对齐 vertical-align: bottom; 底部对齐 vertical-align: s...
清除浮动的几种方式，各自的优缺点、如何垂直居中一个浮动元素? 水平居中的方法、垂直居中的方法？
星辰迷上大海的博客
01-02 1043
清除浮动的方式有直接设置浮动父元素高度 height、额外标签法、单伪元素清除法 :after 和 zoom 、伪元素清除法，各有优缺点；垂直居中浮动元素可以使用 Flexbox 布局实现；垂直居中一个 可以使用 CSS 的 vertical-align 属性；
Css设置垂直居中之Vetical-Align方法
前端开发、简约至上！ - Html，Css，Js，Jquery ...
03-09 238
首先这个属性：Vetical-Align只有当父元素是Th或Td时才会起作用，而对于Div或P是不支持Vetical-Align属性的。但是在Firefox和IE8+下是可以设置Div或P的Display为Table-Cell来激活Vetical-Align属性。但IE6和IE7是不支持Display：Table-Cell的。所在不能跨浏览器。但我们可以使用最原始的笨办法：就是把要垂直居中的元素直...
vertical-align使用方法
weixin_45321331的博客
12-06 6354
介绍: vetical-align主要用来处理图片和文字直接的位置关系 首先我们需要了解中文文本的组成,文本有基线、底线、中线、顶线组成。 可以把文字想象在一个文本框里面,文本四条线的高度,构成了文本框的高。 演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device.
vertaical-align心得笔记
Colin_Mrlwc
06-13 701
vertacil-align的使用对象vertacil-align适用于行内元素，即具有以下属性的元素标签inline inline-block inline-table在行内元素布局中，所有的元素在一行显示，当显示不下的时候会另起一行继续排列，那么具有行内元素的一行叫做行盒子，行盒子占据的空间包含当前行+盒子内部元素所达到的高度差；如下图：行盒子的基线是可变动的，默认情况下，行盒子基线都会主动重...
Web学习（二）CSS
May the Force be with you
03-11 1110
Web学习（二）CSS 1.样式定义方式 行内样式表（inline style） 直接定义在标签的style属性中。 作用范围：仅对当前标签产生影响。 例如： <img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;"> 内部样式表（internal style sheet） 定义在style标签中，通过选择器影响对应的标签。 作用范围：可以对同一个页面中的多个元素产生影响。 外部样式表（exter
vertial-align
最新发布
06-06
Vertical-align属性是CSS中用于控制...在使用`vertical-align`时，请注意，对于块级元素，它可能不起作用，因为块级元素有自己的默认高度。此时，可能需要配合其他布局技术，比如Flexbox或Grid来实现精确的垂直对齐。
qt vertial layout属性设置
06-03
在Qt中，可以通过代码或者图形界面设置垂直布局。下面是代码实现的示例： ```cpp // 创建垂直布局 QVBoxLayout *layout = new QVBoxLayout; // 添加控件到布局中 layout->addWidget(widget1); layout->addWidget...
Vertical Tabs-crx插件
04-03
但是，它不适用于您的Newtab页面，chrome网上商店页面或PDF页面。 不幸的是，这就是它在chrome中的工作方式，目前尚无已知的解决方法。 -通过将iframe注入网页来实现。 因此，在页面上放大/缩小将导致垂直选项卡变大...
word表格一行不对齐解决方法
热门推荐
ggj0727的博客
04-18 2万+
word表格如何对齐、word表格对不齐
同一行的元素，按钮和输入框对不齐的解决方法
肖肖肖丽珠的博客
11-22 3554
要是遇到这个怎么办呢？ 只要在前面的那个输入框里面加上一个vertical-align: bottom;
关于div的设置：display：inline-block出现div对不齐的情况处理方法·
暮雪进化史
03-09 2176
多个并列div设置display：inline-block的时候 某些浏览器会出现：其中某一个div比其他的高或者和低的情况 解决办法为：为每个div加上vertical-align:top的属性
python输出对不齐
qq_43214686的博客
01-07 1007
python输出对不齐 字符宽度有问题 https://blog.youkuaiyun.com/JxufeCarol/article/details/104571454/
同一排元素用display = "inline-block" 后对不齐
咱们裸熊
05-27 1075
两个块级元素用display = "inline-block"后，加上“vertical-align:middle;”后，二者就对齐了；或者加“vertical-align:top;”也行。
DIV 设置 display：inline-block 导致 DIV 对不齐的解决方法
ForeverCjl的专栏
11-21 1万+
情景代码如上。 出问题的浏览器： 360，sogou，猎豹的极速模式 给DIV设置display：inline-block属性后，这四个DIV会拍在一排，但是会个别的高一点，不对齐。 解决方法： 给div设置vertical-align：top vertical-align：top"> vertical-align：top"> vertical-align：top"> ver
图标与文字一行对不齐的问题
xiaobadi的专栏
05-29 1353
一开始总是把文本和图片对不齐，那时候采用的方式是： 针对图一： 最新入库 针对图二： 这样做真是做到花儿也谢了都对不齐，图片总是会靠上，无论怎么设置padding和margin都没用，这个问题一直困扰了很久。 今天浏览网页的时候突然想到，那么多板块头部都是一个图标跟几个文字，并且很多图标都是一样的，那能不能把这种样式用css做出来呢，既可以复用，又可以减少...
python异常处理（基础）
weixin_33785108的博客
01-13 168
  　　之前在学习python的时候有整理过python异常处理的文章，不够简单也不够完整，所以决定再整理一篇，算做补充。 http://www.cnblogs.com/fnng/archive/2013/04/28/3048356.html   python shell &gt;&gt;&gt; open('abc.txt','r') Traceback (most recent...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值