与大写字母中间而不是小写字母的垂直对齐？

Question

vertical-align: baseline;

我也看到了这么问题，但是thothinglothanswers

说这是因为周围的文本默认为

*
{
    margin: 0;
    padding: 0;
    vertical-align: middle;
    /* font-size: 1em; and line-height: 1em; do not change anything */
}

。但是，以下不是这样：

<span>0<span>0<span>0<span>0<span>0<span>0<span>0<span>0<span>0<span>0</span></span></span></span></span></span></span></span></span></span>

vertical-align: middle;

所有内容都设置为

vertical-align: middle;

，但文字仍然偏下。有趣的是，一个答案之一引用了mdn，该词指出，

display: inline-block;

与父元素中的

-lowercase

字母的中间一致。这解释了怪异的偏斜，但是即使有所有小写字母，偏斜

使用

vertical-align

不起作用。

我将搁置我对这是如何违反直觉的看法，而是问：有没有办法

vertical-aligncapital字母中间？或者，更好的是，

端线的中间？我希望保留HTML的结构，同时也允许例如图片和其他高大的事物 - 不仅仅是文字。

简而

eDIT：和没有vertical-align（使观众尽可能宽）

vertical-align

旨在设置同级元素的对齐（

“彼此相邻的元素”两个元素“

”） - 不是从父母到子。 在此示例中，我彼此相邻几个，它们正确对齐。当您开始嵌套它们而没有兄弟姐妹元素时，对齐不知道该与之保持一致（好吧，我不知道在leas上与什么保持一致，但没有立即直观的事情）。如果您给嵌套元素一个兄弟姐妹，它们会再次正确对齐。 span

* {
    margin: 0;
    padding: 0;
    vertical-align: middle;
    border-top: 1px solid #ccc;
}

update

似乎您只是想完全不设置垂直对准属性。该方法浏览器在您寻找

Answer 1

为参考：

Mozilla开发人员网络垂直主靠：中间文档

.

。 不幸的是，您的问题中的一个例子有点过于复杂，无法证明潜在的问题。问题的一个更明显的证明是，当您尝试通过一些相邻文本的大写字母将图像的中心线与中心线对齐（如下）。我希望这将有助于您推断出最初问题的答案。

<span>0</span>
<span>0</span>
<span>P</span>
<span>p</span>
<span>R</span>
<span>r</span>
<span>q</span>
<span>Q</span>
<span>0
   1<span>
     2<span>
       3<span>
         4<span>
           5
           <span>5.1</span>
           <span>5.2</span>
           <span>5.3</span>
           <span>5.4</span>
         </span>
       </span>
     </span>
   </span>
 </span>

.imageTextPair {
  font-size: 50px;
}

.imageTextPair img {
  height: 75px;
  vertical-align: middle;
}

您可以看到，图像的中间通过规格所述的下部案例字母对齐中心线。 我尝试使用新的“ Display：Flex”来解决资本对准问题，但没有运气。以下是我使用现代工具在开发解决方案中的替代方法：

<span class="imageTextPair">
  <img src="https://www.citypng.com/public/uploads/preview/reticle-crosshair-red-icon-free-png-701751694974301y3cnksxiin.png">
  Neighboring text
</span>

.imageTextPair {
  font-size: 50px;
}

.imageTextPair img {
  --imagePixelHeight: 75;
  height: calc(var(--imagePixelHeight) * 1px);
  vertical-align: calc(0.5cap - ((var(--imagePixelHeight) / 2) * 1px));
}

Answer 2

要解释这是如何工作的，默认情况下，内联图像的基线是沿图像底部的。垂直空地属性当前可以采用一个数字值，以向上或向下调整此基线。我执行的计算基本上将图像从基线移动到图像高度的一半（因此，图像的中间与周围文本的基线对齐），然后我将图像向上移动，将图像向上移动，将图像向上移动，将图像向上移动，将图像的高度（0.5CAP）（0.5CAP）与图像的中间对齐，以与大写字母的中间对齐。从理论上讲，这应该与任何字体一起使用，因为“限制”单元使用字体内的适当指标。

您也可以使用字体相对单元（EM）来执行相同的操作

<span class="imageTextPair">
  <img src="https://www.citypng.com/public/uploads/preview/reticle-crosshair-red-icon-free-png-701751694974301y3cnksxiin.png">
  Neighboring text
</span>

.imageTextPair {
  font-size: 50px;
}

.imageTextPair img {
  --imageEmHeight: 1.2;
  height: calc(var(--imageEmHeight) * 1em);
  vertical-align: calc(0.5cap - (var(--imageEmHeight) / 2) * 1em);  
}

这种方法的明显缺点是您需要知道并在高度和垂直对准属性中明确设置图像的高度。如果我们可以隐式使用垂直对准计算中的相应图像的高度，那显然会更好。如果有人对如何实现这一目标有一些想法（不使用JavaScript），我欢迎对这种方法进行进一步的改进。