将文字与中位数

Question

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

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

图像中的基线只是巧合的红色 维基百科没有带红色中线的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确定，{{1} }和font-size，这就是为什么有时即使我们设置vertical-align: middle;，文字也不是中间对齐的。