如何在标题与底部元素对齐时，实现图标与标题文本的对齐？

要同时满足左侧图标、标题、右侧关闭按钮垂直对齐，以及标题下方内容垂直布局的需求，最健壮的方式是调整DOM结构，将标题与图标、关闭按钮归为同一逻辑区块，用水平Flex实现对齐；下方的描述文本和操作按钮保留垂直Flex布局。

最优方案：调整DOM结构 #

修改后的Toast.tsx #

export const Toast = ({title, description, actionLabel, actionButtonCallback, close, timeout = 2000}: IToast) => {
  useTimeout(close, timeout);

  return (
    <div className="toast-container">
      {/* 头部容器：统一承载图标、标题、关闭按钮 */}
      <div className="toast-header">
        <span className='icon'><FaAmazon /></span>
        <div className="title">{title}</div>
        <button onClick={close} className="toast__close-btn"><FaWindowClose/></button>
      </div>
      {/* 内容容器：保留垂直布局承载描述与操作按钮 */}
      <div className='mid-container'>
        <div className="toast__text">{description}</div>
        <button style={{ width: '100px' }} onClick={actionButtonCallback}>{actionLabel}</button>
      </div>
    </div>
  )
}

修改后的styles.css #

.toasts-wrapper {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.toast-container {
  border: 2px solid transparent;
  background-color: #fafafa;
  border-radius: 4px;
  max-width: 380px;
  min-width: 240px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, .2);
  margin-top: 16px;
  display: flex;
  flex-direction: column; /* 整体改为垂直布局，头部与内容区上下排列 */
  position: relative;
  cursor: pointer;
  width: 100%;
  animation: slide-in-right 0.3s ease-in-out forwards;
  padding: 8px; /* 增加内边距优化整体排版 */
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-header {
  display: flex;
  align-items: center; /* 核心：实现图标、标题、关闭按钮垂直居中对齐 */
  margin-bottom: 8px; /* 头部与内容区拉开间距 */
}

.toast__close-btn {
  border: none;
  background-color: transparent;
  font-size: 16px;
  margin-left: auto; /* 将关闭按钮推至最右侧 */
  cursor: pointer;
}

.title {
  font-weight: bold;
  flex: 1; /* 让标题占据剩余空间，避免关闭按钮挤压文本 */
  margin: 0 8px; /* 与图标、关闭按钮拉开横向间距 */
}

.mid-container {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 内容区元素间增加间距，提升可读性 */
}

.icon {
  flex: none;
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

button {
  display : flex;
  align-items: center;
}

方案优势 #

• 语义化结构：将Toast明确分为头部（交互与标题）和内容区（详情与操作），逻辑清晰，便于后续维护。
• 完全响应式：依赖Flex原生布局实现对齐，无需硬编码像素值，适配不同字体大小、容器宽度。
• 扩展性强：头部与内容区样式独立，后续调整其中一方不会影响另一方布局。

不修改DOM结构的替代方案 #

如果无法调整现有DOM结构，可通过计算行高的方式实现对齐（健壮性略逊于结构调整方案）：

修改styles.css中的相关样式：

.toast-container {
  /* 保留原有属性，确保align-items为flex-start */
  align-items: flex-start;
}

/* 左侧包含图标和mid-container的容器 */
.toast-container > div:first-child {
  display: flex;
  align-items: flex-start;
  flex: 1; /* 占据剩余空间，让关闭按钮靠右 */
}

.icon {
  flex: none;
  margin-right: 10px;
  font-size: 16px;
  /* 根据标题行高计算margin-top，实现与标题垂直居中对齐 */
  margin-top: calc((1.5em - 16px)/2);
}

.toast__close-btn {
  border: none;
  background-color: transparent;
  font-size: 16px;
  margin-right: 8px;
  cursor: pointer;
  margin-left: auto;
  /* 与图标同步margin-top，实现与标题对齐 */
  align-self: flex-start;
  margin-top: calc((1.5em - 16px)/2);
}

.title {
  font-weight: bold;
  margin-top: 0; /* 清除默认margin避免干扰对齐 */
}

这个方案通过计算标题行高与图标尺寸的差值，动态设置margin-top，相比硬编码top:4px更适配不同场景，但仍依赖标题行高的稳定性。

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