如何在div内添加不占空间且右对齐的叠加元素？

要实现标题文本占满div宽度并居中，同时右侧图标叠加在上方，只需通过绝对定位调整图标位置，无需拆分列布局：

修改后的代码 #

<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;
    position: relative; /* 为绝对定位元素提供基准 */
}

.section-header .header-text {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0; /* 调整内边距，避免图标遮挡文本 */
}

/* 或者直接用Bootstrap内置定位类，可省略这段自定义CSS */
.header-actions {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
}
</style>

<div class="row section-header border border-dark">
  <div class="col-12 header-text">Actions</div>
  <!-- 使用自定义类或Bootstrap内置类实现绝对定位 -->
  <span class="header-actions">
    <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>

关键修改说明 #

• 给.section-header添加position: relative，让内部绝对定位的图标以该容器为参考基准
• 将标题容器改为col-12，使其占满整个行宽度，此时justify-content: center会让文本在整个header区域居中
• 右侧图标使用绝对定位，通过top: 50% + transform: translateY(-50%)实现垂直居中，right: 1rem控制与右侧的间距（也可直接用Bootstrap的position-absolute end-0 translate-middle-y类替代自定义CSS）
• 给标题容器添加适当内边距，避免图标与文本重叠

内容的提问来源于stack exchange，提问作者Lance