css,css基线对齐
您的位置: 主页 > web前端文章 > css >

vertical-align基线对齐原理【访问量:179】

好的,让我们来谈谈vertical-align。它的用途是将文本和元素相互对齐。尽管如此,您还可以vertical-align在不同的环境中使用非常灵活和细致的元素进行对齐。元素的大小不需要知道。元素停留在流程中,以便其他元素可以对这些元素的更改维度做出反应。一个有用的应用程序是在一个文本旁边放置一个图标。

垂直对齐的特点

但是,vertical-align有时可能会是一个真正的卑鄙小人,并且可能会导致一些挫折感。工作似乎有一些神秘的规则。例如,可能发生的情况是,您更改的元素vertical-align根本不会更改其对齐方式,但该行中的其他元素会执行此操作!我仍然vertical-align不时被拖入黑暗的角落,撕裂我的头发。 不幸的是,关于此事的大部分资源都比较浅薄。尤其是,如果我们想用vertical-align布局。他们专注于尝试垂直对齐元素内的所有元素的误解。他们对物业进行了基本的介绍,并解释了在非常简单的情况下元素是如何对齐的。他们没有解释棘手的部分。 所以,我为自己设定了一个目标,一劳永逸地阐明垂直对齐的行为。我结束了通过W3C的CSS 规范并玩了一些例子。结果是这篇文章。 所以,我们来解决游戏的规则。

要求使用垂直对齐

vertical-align用于对齐内联级元素。这些元素的display属性评估为 一致, 内嵌块或 内联表(本文不考虑)。 内联元素基本上是标签包装文本。 内联块元素是他们的名字所暗示的:块内联元素。它们可以具有宽度和高度(可能由其自己的内容定义)以及填充,边框和边距。 行内级元素按行排列。一旦有更多的元素不符合当前行,将在其下创建一个新行。所有这些线有一个所谓的行框,包围了线的所有内容。不同大小的内容意味着不同高度的线盒。在下图中,线框的顶部和底部用红线表示。

BaiduShurufa_2018-4-4_11-51-30.png

线框追踪我们正在播放的字段。在这些线框内,属性vertical-align负责对齐各个元素。那么,关于什么是元素对齐?

关于基线和外边缘

垂直对齐的最重要参考点是相关元素的基线。在某些情况下,元素的封闭框的顶部和底部边缘也变得重要。让我们来看看基准线和外边缘对于每个相关元素类型的生存位置:

BaiduShurufa_2018-4-4_11-53-10.png

在这里你看到三行文字彼此相邻。线高度的顶部和底部边缘用红线表示,字体的高度由绿线表示,基线由蓝线表示。在左侧,文本的行高设置为与字体大小相同的高度。绿色和红色的线条折叠成每边一条线。在中间,线条高度是字体大小的两倍。在右侧,行高是字体大小的一半。 内联元素的外边缘与其行高的顶部和底部边缘对齐。这并不重要,如果该行高度比字体的高度。所以,外边缘是上图中的红线。 内联元素的基线是角色正在坐的线。这是图中的蓝线。粗略地说,基线位于字体高度的中间以下。

BaiduShurufa_2018-4-4_11-54-20.png

从左到右,您会看到:带有流内容的嵌入块元素(“c”),带有流内容overflow: hidden的嵌入块元素和嵌入块内容(没有嵌入内容)内容区域有一个高度)。边界的边界用红线表示,边界为黄色,填充绿色和内容区域为蓝色。每个内嵌块元素的基线显示为蓝线。 内嵌块元素的外边缘是其边距框的顶部和底部边缘。这些是图中的红线。

Inline-block元素的基线取决于元素是否具有流内容:

在流内容中,内嵌块元素的基线是正常流中最后一个内容元素的基线(例如左侧)。对于最后一个元素,它的基线是根据它自己的规则找到的。 在流入内容但overflow属性评估visible为非基准的情况下,基线是边界框的底部边缘(中间示例)。因此,它与内嵌块元素的底边相同。 在没有流入内容的情况下,基线再次是边界框的底部边缘(例如右侧)。

BaiduShurufa_2018-4-4_11-55-33.png

您已经在上面看到了这个设置。这一次,我画了线框的文本框的顶部和底部(绿色,下面更多)和基线(蓝色)。我还通过给他们一个灰色背景来突出显示文本元素的区域。 行盒具有顶部边缘对齐该线的最上面的元件的顶部边缘和底部边缘对准线的最底部元件的底部边缘。这是上图中红线所示的方框。

线框的基线是可变的:

CSS 2.1没有定义线框的基线位置。 在使用垂直对齐时,这可能是最令人困惑的部分。这意味着,基准线应放置在任何需要满足所有其他条件的地方,如垂直对齐和最小化线框高度。它是方程中的一个自由参数。 由于线框的基线是不可见的,因此它可能不会立即明显。但是,你可以很容易地看到它。只需在问题的开头添加一个字符,就像我在图中添加了一个“x”。如果此字符未以任何方式对齐,则默认情况下它将位于基线上。 在它的基线周围,线框有我们可能称之为其文本框的内容。文本框可以简单地被认为是行框内的内联元素,没有任何对齐。其高度等于其父元素的字体大小。因此,文本框仅包含线框的未格式化文本。该框由上图中的绿线表示。由于该文本框与基线相关,因此当基线移动时它会移动。(注意:这个文本框在W3C规范中被称为strut) 唷,这是最难的部分。现在,我们知道所有东西都可以把事情放在一个角度。让我们快速总结一下最重要的事实: 有一个地区叫行箱。这是垂直对齐发生的区域。它有一个基线,一个文本框和一个顶部和底部边缘。 有内联级元素。这些是对齐的对象。他们有一个基线和一个顶部和底部边缘。

垂直对齐的价值

通过使用vertical-align上面列表中最后一句中提到的参考点被设置成一定的关系。

5.png

  • 基线:元素的基线恰好位于线框的基线之上。 sub:元素的基线移动到线框的基线下方。 super:元素的基线位于线框的基线上方。 百分比%:元素的基线相对于线框的基线以相对于线高的百分比进行移位。 长度:元素的基线相对于线框的基线按绝对长度偏移。

6.png

  • 中间:元素顶部和底部边缘之间的中点与线框的基线加上x高度的一半对齐。

7.png

  • 也可以在相对于线框的基线对齐的情况下列出这两种情况,因为文本框的位置由基线确定。 文本顶部:元素的顶部边缘与线框的文本框顶部边缘对齐。 文本底部:元素的底部边缘与线框的文本框底部边缘对齐。

8.png

  • 顶部:元素的顶部边缘与线框的顶部边缘对齐。 底部:元素的底部边缘与线条框的底部边缘对齐。 在正式的定义被发现,当然,W3C的规格。为什么垂直对齐表现出行为的方式在某些情况下,我们现在可以仔细研究垂直排列。尤其是,我们会处理事情可能出错的情况。    居中一个图标 一个让我烦恼的问题是:我有一个图标,我想在一行文本旁边居中。只是给图标一个vertical-align: middle似乎并不令人满意的中心。看看这个例子:

9.png

<!-- left mark-up -->
<span class="icon middle"></span>
Centered?

<!-- right mark-up -->
<span class="icon middle"></span>
<span class="middle">Centered!</span>

<style type="text/css">
    .icon   { display: inline-block;
        /* size, color, etc. */ }

    .middle { vertical-align: middle; }
</style>

这里再次举例说明,但我画了一些你已经从上面知道的辅助线:

10.png

这为我们的问题提供了一些启示。由于左侧的文本根本没有对齐,因此它位于基线上。问题是,通过将盒子对齐,vertical-align: middle我们将它对齐到小写字母的中间,没有上升(x高度的一半)。所以,顶部的字符突出显示。 在右侧,我们采用字体的整个区域并垂直对齐其中点。文本的基线略低于线框的基线,以实现此目的。结果是图标旁边的一个很好的居中文本。线盒的基线移动在处理时,这是一个常见的陷阱vertical-align:线框的基线位置受该线中所有元素的影响。我们假设,一个元素以这种方式对齐,线框的基线必须移动。由于大多数垂直对齐(顶部和底部除外)都是相对于此基线完成的,因此这也会导致该行中所有其他元素的调整位置。 一些例子: 如果跨越整个高度的线条中存在高个元素,vertical-align则对其没有影响。顶部和底部之间没有空间,可以让它移动。为了完成相对于线框基线的对齐,线框的基线必须移动。短盒子里有一个vertical-align: baseline。在左边,高箱对齐text-bottom。在右侧,它是一致的text-top。你可以看到基线跳起来,带着它的短框。

11.png

<!-- left mark-up -->
<span class="tall-box text-bottom"></span>
<span class="short-box"></span>

<!-- right mark-up -->
<span class="tall-box text-top"></span>
<span class="short-box"></span>

<style type="text/css">
    .tall-box,
    .short-box   { display: inline-block;
        /* size, color, etc. */ }

    .text-bottom { vertical-align: text-bottom; }
    .text-top    { vertical-align: text-top; }
</style>

将高元素与其他值对齐时,会显示相同的行为vertical-align。 即使设置vertical-align为bottom(左)和top(右)也会移动基线。这很奇怪,因为根本不应该涉及基线。

12.png

<!-- left mark-up -->
<span class="tall-box bottom"></span>
<span class="short-box"></span>

<!-- right mark-up -->
<span class="tall-box top"></span>
<span class="short-box"></span>

<style type="text/css">
    .tall-box,
    .short-box { display: inline-block;
        /* size, color, etc. */ }

    .bottom    { vertical-align: bottom; }
    .top       { vertical-align: top; }
</style>

将两个较大的元素放在一条线上并垂直对齐它们将移动满足两个对齐的基线。然后调整线框的高度(左)。添加第三个元素,由于其对齐不会超出线框的边缘,因此不会影响线框的高度,也不会影响基线的位置(中间)。如果它*超出了线框的边缘,则线框的高度和基线再次被调整。在这种情况下,我们的前两个框被向下推(右)。

13.png

<!-- left mark-up -->
<span class="tall-box text-bottom"></span>
<span class="tall-box text-top"></span>

<!-- middle mark-up -->
<span class="tall-box text-bottom"></span>
<span class="tall-box text-top"></span>
<span class="tall-box middle"></span>

<!-- right mark-up -->
<span class="tall-box text-bottom"></span>
<span class="tall-box text-top"></span>
<span class="tall-box text-100up"></span>

<style type="text/css">
    .tall-box    { display: inline-block;
        /* size, color, etc. */ }

    .middle      { vertical-align: middle; }
    .text-top    { vertical-align: text-top; }
    .text-bottom { vertical-align: text-bottom; }
    .text-100up  { vertical-align: 100%; }
</style>

内联级元素可能会有一点差距 看看这个设置。如果您尝试垂直对齐li列表元素,这很常见。

14.png

<ul>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
</ul>

<style type="text/css">
    .box { display: inline-block;
        /* size, color, etc. */ }
</style>

如您所见,列表项位于基线上。在基线之下是一些空间来遮蔽文本的下行。这造成了差距。解决方案?只需将基线移开即可,例如通过将列表项与vertical-align: middle以下对齐:

15.png

<ul>
    <li class="box middle"></li>
    <li class="box middle"></li>
    <li class="box middle"></li>
</ul>

<style type="text/css">
    .box    { display: inline-block;
        /* size, color, etc. */ }

    .middle { vertical-align: middle; }
</style>

对于具有文本内容的内嵌块,不会发生此情况,因为内容已将基线向上移动。 内联级元素之间的差距正在打破布局 这主要是内联级元素本身的一个问题。但是由于它们是垂直对齐的要求,因此了解这一点很好。 您可以在列表项之间的前一个示例中看到此差距。这个差距来自你标记中的内联元素之间的空白。内联元素之间的所有空白区域都折叠为一个空格。例如,如果我们想要将两个内联元素放在一起并给予它们width: 50%,这个空间就会受到阻碍。没有足够的空间放置两个50%的元素和空间。所以这条线分成两行破坏布局(左)。为了消除差距,我们需要删除空格,例如用html注释(右)。

16.png

<!-- left mark-up -->
<div class="half">50% wide</div>
<div class="half">50% wide... and in next line</div>

<!-- right mark-up -->
<div class="half">50% wide</div><!--
--><div class="half">50% wide</div>

<style type="text/css">
    .half { display: inline-block;
        width: 50%; }
</style>

垂直对齐揭秘是的,就是这样。一旦你了解规则,这并不是很复杂。如果vertical-align不行为,只问这些问题: 线框的基线和顶部和底部边缘在哪里? 内联级别元素的基线和顶部和底部边缘在哪里? 这将解决问题。

2018-04-04
匿名评论