如何垂直对齐内部跨度与较小的文本？ [复制]答案

【问题标题】：How vertical align inner span with smaller text? [duplicate]如何垂直对齐内部跨度与较小的文本？ [复制]
【发布时间】：2023-03-18 06:51:01
【问题描述】：

示例：https://codepen.io/ahdung/pen/dJVZov

body {
  font-size: 2em;
}

.outer {
  background-color: darkgray;
}

.inner {
  background-color: red;
  font-size: 0.7em;
  vertical-align: middle;
  /*not useful*/
}

<span class="outer">
      <span class="inner">AAA</span>BBB
</span>

【问题讨论】：

Do not post images of code or errors!
@Rob 我不这么认为，图片是个好东西
您的“意见”直接违反了 Stack Overflow 政策，如我向您展示的链接和帮助中心中所述。请不要和我争论这个。如果您想向 Stack Overflow 版主投诉，这是他们的规定，请向他们提出。
政策？我在帮助中心搜索，找不到。好吧，如果这真的是一项政策，我会坚持下去，谢谢你的警告。但如果这不是一项政策只是一个建议，对不起，我会坚持我的观点。
您似乎无法阅读我已经发布的链接，所以如果您的问题没有因为重复而首先被完全删除，我将等待版主处理。

标签： html css layout

【解决方案1】：

最简单的解决方案。尽管您可能想要修改确切的位置，因为内联块并不总是完美的。

.inner {
    display: inline-block;
    vertical-align: middle;
}

你可以更复杂地获得一个更好的中心做一些事情：

.outer {
    display: inline-block;
    position: relative;
    padding-left: 2.5em;
}

.inner {
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
}

根据它周围的东西以及什么样的文本或可变文本，你可以做不同的事情。

【讨论】：

我不会用absolute，我用flex解决了，谢谢。