HTML/CSS/React元素对齐求助：评论、分享按钮及段落排版

嘿，我来帮你搞定这个布局问题！你想要让comment元素贴在父容器左下角、share贴右下角，同时让p元素居中，咱们一步步来调整：

问题分析 #

你当前的代码里，.post-actions虽然用了绝对定位，但没设置宽度和合理的布局方式；post-share的right属性也没生效（因为它不是绝对定位元素）；p元素的align-self-center需要父容器是Flex布局才能起作用。

修改后的CSS代码 #

body {
  background-color: #fdfdfd;
}
.post-holder {
  width: 400px;
  height: 400px;
  margin: 0px 10px;
  position: relative;
  /* 改为Flex布局，让子元素垂直排列 */
  display: flex;
  flex-direction: column;
}
.username {
  font-size: 16px;
  color: #899bb4;
}
.post-holder p {
  /* 用margin:auto让p元素在剩余空间里垂直+水平居中 */
  margin: auto;
  /* 可选：让文本内容也水平居中 */
  text-align: center;
  /* 防止文本超出容器宽度 */
  max-width: 100%;
}
.post-actions {
  position: absolute;
  bottom: 2rem;
  /* 对齐父容器的内边距（匹配你用的Bootstrap p-3类） */
  left: 1rem;
  right: 1rem;
  /* 用Flex布局排列子元素 */
  display: flex;
  align-items: center;
}
/* 让share元素自动推到最右侧 */
.post-share {
  margin-left: auto;
}

调整说明 #

1. p元素居中：把.post-holder设为垂直方向的Flex容器，给p元素设置margin: auto后，它会自动占据上下的剩余空间，实现垂直居中，同时水平方向也会自适应居中。
2. comment和share对齐：.post-actions绝对定位固定在容器底部，通过left/right控制左右边距，再用Flex布局让子元素排列，给post-share加margin-left: auto就能让它自动靠右，comment自然就留在左下角了。

这样调整后，你的布局应该就能完全符合预期啦！

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