ng-content与可切换文本居中对齐：鼠标移出后ng-content左移如何修复？

架构老林

2026-9-28

问题核心原因

没有为所有内容设置统一的外层居中容器，各独立元素的对齐逻辑不统一
span属于行内元素，直接为其设置text-align: center无效，该属性仅对块级元素的内部行内内容生效
使用*ngIf直接增删标题DOM元素会触发页面重排，导致上方的ng-content位置发生偏移

修复方案

方案1：优化DOM切换逻辑（推荐）

不直接增删DOM，用visibility控制标题显隐，隐藏时仍保留原有占位空间，不会触发重排，同时加统一外层容器控制全局居中：

<!-- 新增统一外层块级容器，全局控制居中 -->
<div style="width: 100%; text-align: center;">
  <div
    (mouseenter)="mouseEnter()"
    (mouseleave)="mouseLeave()"
  >
    <ng-content></ng-content>
  </div>

  <!-- 单个元素控制显隐，visibility隐藏时保留占位 -->
  <div style="height: 1.2em; line-height: 1.2em; visibility: {{ isTitleVisable ? 'visible' : 'hidden' }};">
    {{ title }}
  </div>
</div>

方案2：保留原有ngIf切换逻辑

如果必须要增删DOM，需要保证占位元素和标题元素的高度、对齐属性完全一致：

<div style="width: 100%; text-align: center;">
  <div
    (mouseenter)="mouseEnter()"
    (mouseleave)="mouseLeave()"
  >
    <ng-content></ng-content>
  </div>

  <div *ngIf="isTitleVisable" style="height: 1.2em; line-height: 1.2em;">
    {{ title }}
  </div>
  <div *ngIf="!isTitleVisable" style="height: 1.2em; line-height: 1.2em;"></div>
</div>