vertical-align 和 line-height 的关系

最新推荐文章于 2023-06-30 10:51:57 发布
最新推荐文章于 2023-06-30 10:51:57 发布
阅读量510 收藏
点赞数
分类专栏： css

/* 关键字值 */

vertical-align: baseline;

vertical-align: sub;

vertical-align: super;

vertical-align: text-top;

vertical-align: text-bottom;

vertical-align: middle;

vertical-align: top;

vertical-align: bottom;

/* <长度> 值 */

vertical-align: 10em;

vertical-align: 4px;

/* <百分比> 值 */

vertical-align: 10%;

/* 全局值 */

vertical-align: inherit;

vertical-align: initial;

vertical-align: unset;


vertical-align 和 line-height 的关系

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算的。举个简单的例子，如下CSS代码：

{

line-height: 30px;

vertical-align: -10%;

}

实际上，等同于：

{

line-height: 30px;

vertical-align: -3px; /* = 30px * -10% */

}

IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height



注意：vertical-align和line-height的地下基友关系从HTML5文档声明开始的，因此，以下探讨的现象，都是在页面为HTML5声明前提下，类似下面的doctype:<!doctype html>

<html>




LLLL765
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS | line-height 与 vertical-align详解
MGsniper的博客
02-13 440
本文将依据W3C官方文档，对IFC下的line-height与vertical-align属性进行详尽的解析。
浅谈css中vertical-align和line-height的用法
09-24
在CSS布局中，`vertical-align` 和 `line-height` 是两个非常重要的属性，它们主要用来控制行内元素的垂直对齐和行高的设置。本文将深入探讨这两个属性的用法，并通过实例解释它们如何影响页面元素的显示。 首先，...
灵异留白事件——图片下方无故留白
akufr2065的博客
09-07 282
本人在实践过程中偶尔遇见此等不解的状况，但往往睁一只眼闭一只眼，采取另外的方式了，而今看到原博主的一篇文章，大受启发，希望对各位博友也有所帮助~ ① 基本现象 要八卦vertical-align和line-height之间的关系，我们不妨从一个极其简单的现象入手。假设，我们有一个<div>标签，然后，里面有一张<img>图片，我们的HTML代码就是这样子...
深入理解line-height与vertical-align
weixin_34192993的博客
03-13 124
前面的话 　　line-height、font-size、vertical-align是设置行内元素布局的关键属性。这三个属性是相互依赖的关系，改变行间距离、设置垂直对齐等都需要它们的通力合作。在CSS字体里面已经详细介绍了font-size的相关内容，本文将主要介绍line-height与vertical-align。本文涉及到的术语解释参考CSS视觉格式化   行高 【定义】 　　...
CSS深入理解vertical-align和line-height的关系
laurel_y的博客
04-19 593
上午看了一篇张鑫旭的博客，深入讲解了一下 vertival-align 和 line-height 的关系，感觉打开了新世界的大门。目前我的目标还只是一个熟练的页面仔，下一步就是要熟悉CSS的原理机制。博客里面的内容很多但是没有细讲，先Mark下来，后面慢慢消化 。 这是传送门： http://www.zhangxinxu.com/wordpress/2015/08/css-deep-un
line-height和vertical-align
一个前端小白的瞎扯
02-11 291
总结一下line-height和他的好朋友vertical-align。 幽灵空白节点 在HTML5文档声明中，内联元素的所有解析和渲染变现就如同每一个行框盒子之前都会有一个’空白节点’，这个’空白节点’没有宽度，永远透明。 &lt;div style="background-color: red;"&gt; &lt;span style="display: inline-block;"&gt...
深入理解 line-height 和 vertical-align
09-22
深入理解`line-height`和`vertical-align`是前端开发中至关重要的部分，它们在文本布局和元素对齐中起着核心作用。`line-height`控制行间的垂直间距，而`vertical-align`则调整元素在行内的垂直位置。下面将详细阐述...
全面理解line-height与vertical-align
09-28
主要为大家详细介绍了line-height与vertical-align，帮助大家全面理解line-height与vertical-align，感兴趣的小伙伴们可以参考一下
vertical-align 与 line-height
小白向前冲！
05-29 462
对于行内元素： 行高就是它的外边界 基线是字符恰好位于其上的那条线，基线总是穿过字体高度一半以下的某一点 字体高度 行内块元素： 外边界即其行高 基线取决于元素是否包含流内内容： （1）有流内内容的行内块元素：基线就正常流中最后内容元素的基线 （2）无流内内容 或者 有流内内容但overflow属性值不是visible的行内块元素 ：基线与行内块元...
深入理解CSS：line-height、vertical-align（转载）
sharpdeng的博客
07-08 484
转至： https://www.cnblogs.com/wfeicherish/p/8884903.html 说在前面：通过这次深入学习CSS的line-height和vertical-align属性，对CSS真是刮目相看，决心开始深入CSS学习哈哈。 一、从一个常见的需求开始 在一行中，左侧图标，图标右侧是文字，并且图标和文字在这行垂直居中。 上代码： <div class="bg"&...
理解line-height和vertical-align
web前端开发
11-11 579
来源 | https://www.cnblogs.com/libo-web/p/15457582.html行高（line-height）line-height属性是指文本行基线之间的距离...
CSS line-height和vertical-align详解
qq_40891322的博客
10-13 581
一.line-height 首先看一张图： 从上到下分别是top(顶线),middle(中线),baseline(基线),bottom(底线) 1.line_height:行高，等于内容区域高度+行间距，在图中就是上一行文字底线到下一行文字底线之间的距离。 2.font-size：font-size为字体的高度，图中就是一行文字顶线到底线之间的区域的高度，也就是内容区域高度，即为图中深灰色部分。 3.行间距：两行文字之间的距离，图中就是上一行文字底线到下一行文字顶线之间的距离。 4.行内框：行内框是一
CSS小课堂：一文搞懂line-height和vertical-align
最新发布
zjjcchina的博客
06-30 581
我们看到，div依然和上面显示span标签时撑开了相同的高度，这是由于div自己的字体大小是100px，不论其中是不是直接写了文字，div里的图片也会有基线对齐的情况，不过图片是以其底边和父元素里的x底边对齐。我们可以看到①②的高度是一致的，所以此时span标签位置在div中是正好居中的，但是由于CSS字体在设计的时候不会正好占据内联盒子内容区的1/2处，一般来说会有一些下沉，所以文字显示效果是近似居中的。行框上边界要包裹住所有内联盒子的上边界，行框的下边界要包裹住所有内联盒子的下边界。
深入理解line-height和vertical-align
qq_52732369的博客
12-26 985
深入理解line-height和vertical-align
line-height和vertical-align 属性的对比解析n
JiM-W 的博客
12-09 921
一  明确几个基本概念： 1  内容区：由width和height决定大小； 2  行内框：是指行内元素的边框，可以理解为和内容区大小相等。 3 行框 ：行框的高度等于本行中所有行内元素中行内框的最大的值，其中设置line-height属性可以改变行框 二  line-height 属性  ：normal 浏览器自动设置合理的行高； length : 设置固定的行高  px em ;  n
vertical-align和line-height的理解及实例
weixin_30307921的博客
09-06 458
line-height 字符实际大小和font-size的关系： 下图中不同字体font-size都是100px 测量了一下每个 span 的高度：Helvetica 115px，Gruppo 97px，Catamaran 164px。 所以，font-size 相同，font-family 不同，得到的 span 元素的高度也不同，为什么会这样呢，我们先了解下字体设计时，字符的结构...
line-height与vertical-align之行内元素布局
webpon
08-08 621
CSS 垂直对齐vertical-align属性 在CSS中，行框的高度总是足以容纳它包含的所有行内级框，当一个行内级框 B 的高度小于包含它的行框高度时，则由vertical-align属性来决定B在行框中垂直对齐的位置。因此，vertical-align属性只对行内级元素有效，对块级元素无效。并且，该属性不能被子元素继承。 在垂直对齐时，行内非替换元素的行内级框是由 line-h...
vertical-align 各个属性值的含义
qq_44960253的博客
06-24 4267
vertical-align 各个属性值的含义 注意：vertical-align 属性不继承 有关基线、行内框、行框、内容区、行距的 定义 vertical-align: baseline vertical-align: baseline 强制元素的基线与父元素的基线对齐。（多数浏览器的默认值） vertical-align: super vertical-align: super 使元素基线高于父元素基线，但是高多少规范中没有要求，由用户代理（浏览器）自己决定，不同浏览器可能不同。 <sty
CSS中line-height属性
qq_42526440的博客
01-06 2227
line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。 CSS Demo: line-height line-height: normal; line-height: 2.5; line-height: 3em; line-height: 150%; line-height: 32px; 语法 /* Keyword valu
vertical-align和line-height
03-16
vertical-align是CSS属性，用于设置元素在垂直方向上的对齐方式，常用于表格单元格中的内容对齐。它可以设置为baseline、top、middle、bottom等值。 line-height也是CSS属性，用于设置元素的行高，即行框盒子的高度...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值