中心文本到图像是一个项目符号点

Question

我正在使用图像作为我的 Github 页面（降价文件）的要点，如 here. Now, I'd like to center the text next to the image vertically. This is shown 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 的信息，但不确定如何内联使用它。感谢您的帮助！

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

Answer 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 属性来将图像调整为您喜欢的大小

中心文本到图像是一个项目符号点

Center text to image that is a bulletpoint

html

css

markdown

inline-styles

github-pages