如何实现图片居中且文字环绕两侧？解决float:center不存在的问题

CSS里确实没有float: center属性，下面给两种能满足需求的方法，优先支持在img标签内编写样式：

方法一：用shape-outside实现文字环绕居中图片（直接在img里写样式） #

这个方法能让图片居中，同时文字自然环绕在图片的左右两侧，完全通过img的inline样式实现：

<img style="float: left; shape-outside: inset(0 50% 0 50%); margin-left: 50%; transform: translateX(-50%); margin: 0 15px 15px 15px;" src="image.png"/>

关键样式说明：

• float: left：让图片脱离文档流，允许文字环绕
• shape-outside: inset(0 50% 0 50%)：定义图片右侧50%区域为文字可填充区域，实现右侧文字环绕
• margin-left: 50%：把图片左边缘推到容器中线
• transform: translateX(-50%)：让图片自身左移50%宽度，实现真正居中
• 最后的margin：控制图片和文字的间距

方法二：Flex布局实现左右文字+居中图片（需配合父容器） #

如果需要更规整的左右分栏效果（左右文字独立成块，中间放图片），可以用Flex布局，img只需少量样式：

<div style="display: flex; align-items: center; gap: 15px; padding: 0 10px;">
  <p>左侧文字内容，支持多行显示...</p>
  <img style="margin-bottom: 15px;" src="image.png"/>
  <p>右侧文字内容，和左侧垂直居中对齐...</p>
</div>

布局说明：

• 父容器的display: flex让子元素横向排列
• align-items: center保证文字和图片垂直居中
• gap: 15px控制元素间的间距

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