将文本与中位数对齐

Question

在排版文本中有一个mean-line，或midline，位于baseline和cap height之间。 维基百科使用此图像作为参考：

是否可以通过css中的中间线对齐文本？ 以下示例显示红线上方的居中文本。

#box {
    background: lightblue;
    width: min-content;
    height:  3em;
    
    display: flex;
    align-items: center;
    
    font-size: 50px;
    
    /* Needed for red center line */
    position: relative;
}

/* Red center line */
#cline {
    position: absolute;
    background: red;
    left: 0;
    right: 0;
    height: 1px;
}

<div id="box">
    <div id="cline"></div>
    Sphinx
</div>

图像中的基线只是巧合的红色。 维基百科没有带红色中线的svg。

Answer 1

不，但是css有vertical-align属性，有适当的字体，行高，字体大小，屏幕，我们可以存档这个目标......

  p {
    background: brown;
    font-size:30px;
  }
  span {
    font-size: 60px;
    color:darkgoldenrod;
  }
  .top {
    vertical-align: top;
  }
  .baseline {
    vertical-align: baseline;
  }

  <p>Default text <span class="top"> top align text</span></p>
  <p>Default text <span class="baseline"> baseline align text</span></p>

vertical-align仅适用于内联元素，结果取决于line-box的高度，由line-height，font和font-size决定，这就是为什么有时甚至我们设置vertical-align: middle;，文本不是中间对齐的。