垂直对齐：基线有什么用？

2024-02-02

我以为我了解 CSS，但我现在需要向某人解释一些事情，但我发现我做不到。

我的问题基本上可以归结为：为什么vertical-align:baseline当同一行中有其他对齐时被忽略？

示例：如果第二个跨度有vertical-align:bottom，如果是，则第一个跨度的垂直对齐将被忽略baseline;它的行为就好像它有bottom too.

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>

如果这是正常行为，那么为什么没有在任何地方进行描述？我还没有找到任何消息来源表明基线和顶部/底部以这种方式相互干扰。

垂直对齐

vertical-align https://developer.mozilla.org/en/docs/Web/CSS/vertical-align用于对齐行内元素 https://www.w3.org/TR/CSS2/visuren.html#inline-level。这些是元素，其display https://developer.mozilla.org/en-US/docs/Web/CSS/display属性评估为：

inline
inline-block
inline-table（本答案中未考虑）

行内元素在行中彼此相邻放置。一旦元素数量超过当前行，就会在其下方创建一个新行。所有这些线路都有一个所谓的line box，它包含了该行的所有内容。不同大小的内容意味着不同高度的行框。

In the following illustration the top and bottom of line boxes are indicated by red lines.

在这些行框内的属性vertical-align负责对齐各个元素。

Baseline

垂直对齐最重要的参考点是相关元素的基线。在某些情况下，元素封闭框的顶部和底部边缘也变得很重要。

行内元素

行高的顶部和底部边缘由红线表示，字体的高度由绿线表示，基线由蓝线表示。

在左侧，文本的行高设置为与字体大小相同的高度。绿线和红线两边都塌陷为一条线。

在中间，行高是字体大小的两倍。

在右侧，行高是字体大小的一半。

请注意，如果行高小于字体高度，则内联元素的外边缘（红线）并不重要。

内联块元素

从左到右你看：

an inline-block元素与in-flow https://www.w3.org/TR/CSS21/visuren.html#positioning-scheme content
an inline-block元素与in-flow https://www.w3.org/TR/CSS21/visuren.html#positioning-scheme内容和overflow: hidden
an inline-block元素没有in-flow https://www.w3.org/TR/CSS21/visuren.html#positioning-scheme内容（但内容区域有高度）

页边距的边界用红线表示，边框为黄色，内边距为绿色，内容区域为蓝色。每个的基线inline-block元素显示为蓝线。

The inline-block元素的基线取决于该元素是否具有in-flow https://www.w3.org/TR/CSS21/visuren.html#positioning-scheme内容。的情况下：

in-flow https://www.w3.org/TR/CSS21/visuren.html#positioning-scheme内容的基线inline-blockelement 是正常流程中最后一个内容元素的基线（左边的例子)
in-flow https://www.w3.org/TR/CSS21/visuren.html#positioning-scheme内容但overflow属性评估为除可见之外的其他内容，基线是边距框的底部边缘（中间的例子)
no in-flow https://www.w3.org/TR/CSS21/visuren.html#positioning-scheme内容基线再次是边距框的底部边缘（右边的例子)

Line box

这可能是使用时最令人困惑的部分vertical-align。这意味着，基线放置在需要满足所有其他条件（例如vertical-align and 最小化行框的高度。它是一个自由参数在等式中。

由于线框的基线是不可见的，因此可能不会立即明显看出它在哪里。但是，您可以很容易地使其可见。只需在问题的行首添加一个字符，如图中的“x”即可。如果该字符未以任何方式对齐，则默认情况下它将位于基线上。

在其基线周围，行框有我们所谓的文本框（图中的绿线）。文本框可以简单地视为行框内的内联元素，无需任何对齐。它的高度等于font-size其父元素。因此，文本框仅包围行框的未格式化文本。由于此文本框与基线相关联，因此它会随着基线移动而移动。

Snippet

如果你想做一些不同的实验vertical-align and font-size这里有一个片段，您可以在其中尝试一下。也可用于JSFiddle https://jsfiddle.net/rcp47hm4/6/.

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 https://stackoverflow.com/users/4254681/duannx.

_{Source: Please note that this is an extract of Vertical-Align: All You Need To Know http://christopheraue.net/2014/03/05/vertical-align/ written by Christopher Aue.}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)