html - h2 标签内的中间对齐内联代码

Question

在这个例子中(bootply link):

<h2>Title <small><code>one line</code></small></h2>

我试图将代码元素与标题居中对齐。我尝试使用 vertical-align: middle对于代码元素(基于此 answer )，但它并没有按照我的意愿进行。有没有办法把代码元素放得更高？

提前谢谢你。

Answer 1

flexbox

* {
  box-sizing: border-box;
}
h2 {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
small {
  padding: 0 .25em;
}

<h2>Title <small><code>one line</code></small></h2>