中间对齐 h2 标记内的内联代码

【问题标题】：Middle align inline code inside h2 tag中间对齐 h2 标记内的内联代码
【发布时间】：2016-07-15 18:19:08
【问题描述】：

在这个例子中（bootply link）：

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

我正在尝试将代码元素与标题居中对齐。我尝试使用vertical-align: middle 作为代码元素（基于此answer），但它并没有达到我想要的效果。有没有办法让代码元素更高？

提前谢谢你。

【问题讨论】：

您的 CSS 存在一些问题。首先，您选择的是 .code 类而不是元素（不存在 .code 类）。其次，您的> 选择器将不起作用，因为code 不是h2 的直接子代。

【解决方案1】：

弹性盒

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

&lt;h2&gt;Title &lt;small&gt;&lt;code&gt;one line&lt;/code&gt;&lt;/small&gt;&lt;/h2&gt;

【讨论】：

非常感谢您的回复。不幸的是，Twitter Bootstrap 在代码行周围放置了一个框（请参阅我提供的链接）。然后与标题不一致。也就是说，代码的标题和文本对齐（底部），但我更希望代码的框对齐在标题的中间。有什么办法可以帮助我解决这个问题吗？谢谢。
不确定您指的是什么box...在您提供的链接中似乎没有。 - codepen.io/Paulie-D/pen/YqQMZb
奇怪，但它在 bootply bootply.com/iGJqxVx1jK 上的行为不同。当提到框时，我指的是代码周围的红色环绕。