什么是垂直对齐:基线？

Question

我以为我了解CSS的方式,但我现在需要向某人解释一些东西,我发现我做不到.

我的问题基本上归结为:vertical-align:baseline当同一行中存在其他对齐时,为什么会被忽略？

示例:如果第二个跨度有vertical-align:bottom,则第一个跨度的垂直对齐将被忽略baseline; 它表现得好像它bottom也一样.

span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:bottom;}

<p>
  <span>one</span> <span>two</span>
</p>

如果所有跨度都具有垂直对齐baseline,或者如果它们都是baseline,则它们的行为与预期一致.

span:first-child {vertical-align:top}
span:last-child {font-size:3em; vertical-align:bottom;}

<p>
  <span>one</span> <span>two</span>
</p>

span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:baseline;}

<p>
  <span>one</span> <span>two</span>
</p>

如果这是正常行为,那为什么不在任何地方描述？我没有找到任何说明基线和顶部/底部以这种方式相互干扰的来源.

Answer 1

垂直对齐

vertical-align用于对齐内联级元素.这些是元素,其display属性的评估结果为:

• inline
• inline-block
• inline-table (在这个答案中没有考虑)

内联级元素以行的形式排列在一起.一旦有多个元素不适合当前行,就会在其下面创建一个新行.所有这些线有一个所谓的行框,包围了线的所有内容.不同大小的内容意味着不同高度的线框.

在下图中,线框的顶部和底部用红线表示.

在这些线框内,属性vertical-align负责对齐各个元素.

底线

垂直对齐的最重要参考点是所涉及元素的基线.在某些情况下,元素封闭盒的顶部和底部边缘也变得很重要.

内联元素

线高的顶部和底部边缘由红线表示,字体的高度由绿线表示,基线由蓝线表示.

在左侧,文本的行高设置为与font-size相同的高度.绿色和红色线在每侧折叠成一条线.

在中间,行高是font-size的两倍.

在右侧,线条高度是字体大小的一半.

请注意,如果行高小于字体高度,则内联元素的外边缘(红线)无关紧要.

内联块元素

从左到右,您会看到:

• 具有流入内容的inline-block元素

• 一个inline-block与元件在流内容和overflow: hidden

• 一个inline-block不带元件在流内容(但内容区域的高度)

边距的边界用红线表示,边框是黄色,填充绿色,内容区域是蓝色.每个inline-block元素的基线显示为蓝线.

该inline-block元素的基线取决于元素是否在流内容.的情况下:

• 流入内容inline-block元素的基线是正常流程中最后一个内容元素的基线(左侧示例)

• 流入内容但是overflow评估除可见之外的其他属性,基线是边距框的下边缘(例如中间)

• 没有流入内容,基线再次是边距框的下边缘(例如右边)

线框

在使用时,这可能是最令人困惑的部分vertical-align.这意味着,基线被放置在需要满足所有其他条件的地方,vertical-align并最小化线盒的高度.它是等式中的自由参数.

由于线框的基线是不可见的,因此它可能不会立即显而易见.但是,你可以很容易地看到它.只需在问题的行尾添加一个字符,如图中的"x".如果此字符未以任何方式对齐,则默认情况下它将位于基线上.

在它的基线周围,线框有我们称之为文本框的内容(图中的绿线).文本框可以简单地被视为行框内的内联元素,没有任何对齐.它的高度等于font-size其父元素的高度.因此,文本框仅包含行框的无格式文本.由于此文本框与基线相关联,因此它会在基线移动时移动.

片段

如果你想要做一些试验各种vertical-align和font-size在这里你有一个片段,你可以尝试一下.也可以在JSFiddle中找到.

let sl1 = document.getElementById('sl1');
let sl2 = document.getElementById('sl2');
let sl3 = document.getElementById('sl3');
let sl4 = document.getElementById('sl4');
let elm1 = document.getElementById('elm1');
let elm2 = document.getElementById('elm2');
let elm3 = document.getElementById('elm3');
let elm4 = document.getElementById('elm4');
let ip1 = document.getElementById('ip1');
let ip2 = document.getElementById('ip2');
let ip3 = document.getElementById('ip3');
let ip4 = document.getElementById('ip4');
let slArr = [sl1, sl2, sl3, sl4];
let elmArr = [elm1, elm2, elm3, elm4];
let ipArr = [ip1, ip2, ip3, ip4];
let valueArr = ['baseline', 'top', 'middle', 'bottom'];
for (let i = 0; i < slArr.length; i++) {
  slArr[i].addEventListener('change', (event) => {
    elmArr[i].style.verticalAlign = event.target.value;
    elmArr[i].innerHTML = event.target.value;
    addDiv();
  })
}
for (let i = 0; i < ipArr.length; i++) {
  ipArr[i].addEventListener('change', (event) => {
    elmArr[i].style.fontSize = event.target.value + 'em';
    addDiv();
  })
}

document.getElementById('btnRandom').addEventListener('click', () => {
  for (let i = 0; i < elmArr.length; i++) {
    let element = elmArr[i];
    let fontSize = Math.floor(Math.random() * 4 + 1);
    ipArr[i].value = fontSize;
    element.style.fontSize = fontSize + 'em';
    let styleIndex = Math.floor(Math.random() * 4);
    element.style.verticalAlign = valueArr[styleIndex];
    element.innerHTML = valueArr[styleIndex];
    slArr[i].selectedIndex = styleIndex;
  }
}, this);

function addDiv() {
  let view = document.getElementById('viewer');
  view.innerHTML = "";
  elmArr.forEach(function(element) {
    let div = document.createElement('div');
    div.appendChild(element.cloneNode());
    view.appendChild(div);
  }, this);
}

.header span {
  color: #000;
}

select {
  width: 100px;
}

#elms {
  border: solid 1px #000;
  margin-top: 20px;
  position: relative;
}

span {
  color: #FFF;
  font-size: 1em;
}

#elm1 {
  background-color: #300;
}

#elm2 {
  background-color: #6B0;
}

#elm3 {
  background-color: #90A;
}

#elm4 {
  background-color: #B00;
}

div {
  z-index: -1;
}

#div1 {
  width: 100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 25%;
}

#div2 {
  width: 100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 50%;
}

#div3 {
  width: 100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 75%;
}

<div class="header"> <span style="width: 100px;display: block;float: left;margin-right: 20px;">vertical align</span> <span>font-size(em)</span> </div>
<div>

  <select name="sl1" id="sl1">
    <option value="baseline">baseline</option>
    <option value="top">top</option>
    <option value="middle">middle</option>
    <option value="bottom">bottom</option>
  </select>
  <input type="number" value="1" id="ip1" />
  <br>
  <select name="sl2" id="sl2">
    <option value="baseline">baseline</option>
    <option value="top">top</option>
    <option value="middle">middle</option>
    <option value="bottom">bottom</option>
  </select>
  <input type="number" value="1" id="ip2" />
  <br>
  <select name="sl3" id="sl3">
    <option value="baseline">baseline</option>
    <option value="top">top</option>
    <option value="middle">middle</option>
    <option value="bottom">bottom</option>
  </select>
  <input type="number" value="1" id="ip3" />
  <br>
  <select name="sl4" id="sl4">
    <option value="baseline">baseline</option>
    <option value="top">top</option>
    <option value="middle">middle</option>
    <option value="bottom">bottom</option>
  </select>
  <input type="number" value="1" id="ip4" />
  <br>
  <button id="btnRandom" (onclick)="random()">Random</button>
</div>
<div id="elms">
  <span id="elm1">one</span>
  <span id="elm2">two</span>
  <span id="elm3">three</span>
  <span id="elm4">four</span>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>
<div id="viewer"></div>

这个片段是由Duannx制作的.

_{资料来源:请注意,这是Christopher Aue撰写的Vertical-Align:All You Know To Know的摘录.}

Answer 2

问题是为什么会vertical-align: baseline;被忽略。好吧，我认为不是。在第一个代码段中，您正在使用baseline，bottom这显然可以使两个<span>元素有所区别。那怎么baseline办？那么baseline对齐与父元素的基线元素的基线。在下面的示例中，我复制并调整了一些部分以提供区别。

span.one {vertical-align:baseline}
span.two {vertical-align:middle;}

<p>
  <span class="one">one</span> <span class="two">two</span>
</p>

如您所见，baseline对齐方式与对齐方式一样正常middle。

现在让我们测试其他东西。让我们交换和的对齐方式baseline，middle然后编辑middle并添加第三个<span>

span.one { vertical-align: top;}
span.two { vertical-align: baseline;}

span.three {vertical-align: middle; height: 20px; }
p {
height: 50px;
background-color: grey;
}

<p>
  <span class="one">one</span> <span class="two">two</span> <span class="two">two</span><br><br> <span class="three">three</span>
</p>

现在，如果您要编辑第二个片段并查看其中的vertical-align，<span class="three">您可以清楚地看到，当更改对齐方式时，文本确实会更改其位置。

但是您要问的是同一行上的文本是否相关，因此让我们看一下下面的代码段。

span.one { vertical-align: middle;}
span.two { vertical-align: baseline;}

span.three {vertical-align: middle; height: 20px; }
p {
height: 50px;
background-color: grey;
}

<p>
  <span class="one">one</span> <span class="two">two</span> <span class="two">two</span><span class="three">three</span>
</p>

如您所见，在第三个代码段中，我将第三个代码放在了<span>一个和两个旁边。它确实有所作为。在baseline这种情况下是从不同middle取向。这是因为baseline抢夺baseline父母的权利。由于父母的身高是正常的，因此不会影响baseline和top对齐。但是何时使用middle还是sub明显有区别。

有关每个路线的信息，请查看此链接。