此问题已在此处有答案：

Center one and right/left align other flexbox element（11个回答）
2天前关闭。
我想添加一个元素到一个右对齐的div中，但它位于div中另一个元素的顶部。这很难解释，但这里有一些图像来澄清它：

您可以看到Actions是如何居中的，但由于末尾的图标，它没有占据div的整个宽度。我目前正在使用Bootstrap列，但这显然不能实现我所需要的。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<style>
.section-header {
            border-bottom: 1px solid var(--menu-dark);
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            background-color: var(--menu-light);
            font-weight: bold;
        }

            .section-header .header-text {
                display: flex;
                justify-content: center;
            }
</style>

<div class="row section-header border border-dark">
  <div class="col header-text">Actions</div>
  <span class="col-auto"><a href="#" class="btn-edit"><span class="bi bi-pencil"></span></a>
  </span>
</div>
<div class="row border border-dark d-flex justify-content-center">
Test
</div>