在线聊天系统中实现DELETE按钮垂直居中并避免文本覆盖

针对你的在线聊天系统需求，通过以下CSS修改即可实现删除按钮垂直居中，同时避免消息文本与按钮重叠：

关键修改点 #

1. 实现删除按钮垂直居中：利用绝对定位的top: 50%配合transform: translateY(-50%)，让按钮始终相对于父容器垂直居中，不受消息高度变化影响。
2. 避免文本重叠：给自己发送的消息容器（.sender）添加左侧内边距，预留出删除按钮的位置，确保文本不会覆盖按钮。

修改后的完整CSS代码 #

fieldset {
  text-align: center;
  border-width: 0px;
  margin-bottom: 10px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

fieldset.chat {
  width: 40%;
}

.message {
  border: 1px solid #ccc;
  padding: 7px;
  margin: 3px;
  word-wrap: break-word;
}

.sender {
  text-align: right;
  background-color: #f2f2f2;
  position: relative;
  padding-left: 55px; /* 预留删除按钮的位置，避免文本覆盖 */
}

.receiver {
  text-align: left;
  background-color: #e0f7fa;
}

.column {
  float: left;
  margin: 0 auto;
}

.chat-box {
  border: 1px solid #ccc;
  margin-left: 10px;
  max-height: 400px;
  overflow: auto;
  margin-bottom: 3px;
}

.messagedate {
  font-size: 12px;
  color: gray;
}

.nick {
  font-size: 13px;
}

.new-message {
  width: 90%;
  margin-left: 10%
}

.send {
  display: table-cell;
  vertical-align: middle;
}

.delete {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 7px; /* 与.message的padding保持一致，保证间距 */
}

.delete img {
  height: 45px;
}

.delete a:link,
a:visited {
  color: blue;
}

.delete a:hover {
  color: red;
}

说明 #

• top: 50%让按钮顶部对齐父容器垂直中点，transform: translateY(-50%)再将按钮向上偏移自身高度的一半，完美实现垂直居中。
• .sender的padding-left: 55px是根据删除按钮图片高度（45px）加上10px间距设置的，你可以根据实际图片尺寸调整这个值。
• 绝对定位的删除按钮不会影响消息文本的布局，同时父容器.sender的position: relative确保按钮相对于消息容器定位，不会跑错位置。

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