Question

我的引导页面上有一张卡片

<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">
        <span style="vertical-align: middle">Example Python3 script</span>
        <button class="float-right 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>

style="vertical-align: middle"不起作用。有什么办法可以通过按钮将文本对齐到中间吗？

Answer 1

您将使用flexbox（d-flex）将项目居中对齐。另外，请更新按钮，因为向右浮动不适用于flexbox。改用自动页边距。.

<div class="container">
    <div class="card">
        <div class="card-header bg-info text-light d-flex align-items-center">
            <span>Example Python3 script</span>
            <button class="ml-auto 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>
</div>

https://www.codeply.com/go/FZ3CrQpLxY

引导程序垂直引导对齐

1 个答案: