Bootstrap卡片头部垂直对齐问题：文本与按钮无法居中对齐

这是个很常见的Bootstrap布局小问题，你的vertical-align: middle没生效主要有两个原因：一是Bootstrap 4的.card-header默认不是flex容器，行内元素的垂直对齐规则在这里不适用；二是按钮用了float-right脱离了正常文档流，导致文本和按钮不在同一对齐上下文里。

推荐用Bootstrap原生的flex工具类来解决，既简洁又符合框架的设计思路，修改后的代码如下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card">
  <div class="card-header bg-info text-light d-flex align-items-center justify-content-between">
    <span>Example Python3 script</span>
    <button class="btn-light btn" onclick="copy_function()">Copy</button>
  </div>
  <div class="card-body" style="background: #F0F0F0">
    <pre><code class="python" id="text_to_copy">import urllib.request, json</code></pre>
  </div>
</div>

关键修改点说明： #

• 给.card-header添加了三个Bootstrap工具类：
  • d-flex：将header容器设置为flex布局，让内部元素可以用flex规则对齐
  • align-items-center：让flex容器内的所有子元素在垂直方向上居中对齐
  • justify-content-between：让文本和按钮分别靠向容器的左右两端，自动分配中间的空白空间
• 移除了span上的style="vertical-align: middle"，因为flex布局已经解决了垂直对齐问题
• 移除了按钮上的float-right，flex布局下不需要浮动来实现右对齐

如果你不想用flex布局，也可以通过调整按钮的外边距来实现近似对齐，但flex方法是Bootstrap 4中最推荐的方式，兼容性和可维护性都更好。

内容的提问来源于stack exchange，提问作者Gábor Erdős