将图片居中并将文字环绕（水平和垂直）

Question

我正在尝试将图像居中放置在某些文本中，但CSS中仍然没有这样的功能。上面的屏幕截图来自内置了此功能的Microsoft Word。当然，我知道这与HTML或CSS无关，只是为了展示我想要实现的目标：-）

当仅应用于图像时，要破解它并不是难事，但是当您要将“文本”或其他输出包装起来时，就很难了。我一直在修改图像的绝对位置，但是在那种情况下，我必须在图像开始的位置断开文本。这很难做到。另一个要点是，文本是始终在变化的函数（Lightspeed HQ）的输出。因此，我不能只是手动拆分文本。

 <ul class="list-brands">
   {% for tag in shop.tags %}
   <li><a href="{{ tag.url | url }}" title="{{ tag.title }}">{{ tag.title }} <span>({{ tag.count }})</span></a></li>
   {% endfor %}
 </ul>