Discord机器人网页控制面板布局异常：h3挤压按钮右移，如何调整居中？

问题根源 #

• 外层div设置了display:flex，默认将图片、h3、按钮三个元素横向排列，h3作为弹性项会占满图片之外的剩余宽度，直接将按钮挤压到最右侧
• h3和按钮是同级横向排列的结构，天生无法实现「h3在按钮正上方」的效果
• 代码中混用了flex布局和float属性，flex子元素的float属性完全无效，同时用负margin调整垂直位置的逻辑非常混乱，是布局异常的核心诱因

修复后完整代码 #

原有.guildBImg样式无需修改，HTML部分修改如下：

<div style="background-image: url('https://cdn.discordapp.com/icons/623189087225905153/91396f1f4ea9ed9865112db0c827682a.webp?size=96'); filter: blur(5px) brightness(50%); -webkit-filter: blur(5px) brightness(50%);" class="guildBImg"></div>
<div style="width: 100%; height: 100%; position: relative; display: flex; align-items: center; padding: 0 20px; box-sizing: border-box; gap: 30px;">
  <img src="https://cdn.discordapp.com/icons/623189087225905153/91396f1f4ea9ed9865112db0c827682a.webp?size=128" style="width: 100px; height: 100px; border-radius: 50%; border: 2px solid #fff; flex-shrink: 0;" />
  <!-- 新增h3和按钮的包裹容器 -->
  <div class="text-btn-wrapper" style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;">
    <h3 style="font-size: 16px; font-weight: bold; text-overflow: ellipsis; max-height: 70px; overflow: hidden; width: 100%; text-align: center; margin: 0 0 15px 0;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m</h3>
    <button style="background-color: #5865f2; width: 240px; height: 35px; border-radius: 5px; border: none; color: #fff; font-size: 16px; font-weight: bold;">Manage</button>
  </div>
</div>

核心修改点 #

• 新增独立的容器包裹h3和按钮，将容器设置为纵向flex布局，水平居中对齐，占满图片右侧的所有剩余空间
• 移除所有冗余的float属性、无效的display: flexbox写法
• 移除混乱的负margin定位，改用flex的对齐属性控制元素位置
• 给h3设置text-align: center，实现文本在容器内居中

内容的提问来源于stack exchange，提问作者Dr. Tigga