将文本居中到作为项目符号的图像答案

【问题标题】：Center text to image that is a bulletpoint将文本居中到作为项目符号的图像
【发布时间】：2021-08-20 20:49:42
【问题描述】：

我使用图像作为我的 Github 页面（降价文件）的要点，如 here 所述。现在，我想将图像旁边的文本垂直居中。这显示为here（参见页面的下三分之一），但我必须使用内联 css 来完成，并且无法让它工作。

到目前为止我所拥有的：

<ul style="list-style-image: url('/assets/images/thumb.jpg'); padding-left: 120px;">
<li>I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines</li>
</ul>

给我

如果我希望它看起来像：

我已经尝试过设置行高，但是当出现换行时，这会导致奇怪，就像这里的情况一样。我阅读了有关 flexbox 的信息，但不确定如何内联使用它。任何帮助表示赞赏！

我再说一遍：它必须是内联的！！

【问题讨论】：

为什么要在ul 上显示图片？你需要左边的图片和右边的所有项目（li）吗？或者每个li 都会包含一个图像和文本？
不使用list-style，可以使用简单的css来实现。
我对CSS和HTML不太了解，这只是我从网上找到的拼凑而成。我希望每个列表项都包含一个图像（作为项目符号）和图像右侧的一些文本。 @Abin，我认为不能使用 .css 文件，因为 github markdown 不会加载它以防止恶意软件攻击
@masterBroesel，我刚看到回复。所以你不能用我的方法。

标签： html css markdown github-pages inline-styles

【解决方案1】：

为什么不在你的 HTML 中使用这样的东西：

<div class='list-item'>
  <img src='/assets/images/thumb.jpg' class='bullet-image'/>
  <p class='item-text'>Lorem ipsum...</p>
</div>

然后你可以在你的 CSS 中添加：

.list-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

这应该可以解决问题。然后，您可以根据需要重新调整图像大小。

编辑：

您可以做的另一件事是使用内联样式：

<ul>
   <li style="display: flex; justify-content: center; align-items: center">
      <img src='/assets/images/thumb.jpg' style=""/>
      <p> I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines </p>
   </li>
</ul>

然后你应该通过在 img 元素的 style 属性上添加 width 和 height 属性来将图像调整为你喜欢的大小

【讨论】：

感谢您的回答，但我特别需要这样做 inline，如问题中所述。有什么建议吗？
如果你想要它内联可以是：
当然这种方式需要用到一个div。我不确定它是否适用于 ul 元素。对第一个而不是内联答案感到抱歉
请查看我的编辑，看看是否适合您
抱歉这么晚才回来。编辑成功了 :) 非常感谢！