如何实现左侧文字与右侧浮动图片垂直居中对齐且图片居右？

你的代码存在几个问题导致无法实现需求，以下是修正后的代码和说明：

错误分析 #

• 父容器.div的align-tiems是拼写错误，应为align-items，且未设置display: flex——align-items仅在flex/grid容器中生效。
• 使用float: left会让文本脱离正常文档流，导致父容器的垂直居中设置失效。
• .alignright的text-align: right对图片元素无效，vertical-align: middle在float元素上也无法发挥作用。

修正后的代码 #

HTML #

<div class="div"> 
  <p class="alignleft">text on the left</p> 
  <img src="example.jpeg" class="alignright"> 
</div>

CSS #

.div {
  display: flex; /* 启用flex布局 */
  align-items: center; /* 垂直方向居中对齐子元素 */
  justify-content: space-between; /* 让子元素分别靠向容器两端 */
}

.alignleft {
  margin: 0; /* 清除p标签默认外边距，避免多余间距 */
}

.alignright {
  /* 可根据需求自定义图片尺寸 */
  width: 100px;
  height: auto;
}

效果说明 #

• 父容器通过display: flex和align-items: center，实现文本与图片的垂直居中对齐。
• justify-content: space-between确保文本固定在容器左侧，图片固定在容器右侧，完全匹配你的期望效果。

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