如何将标记对齐到图像列表 HTML 的中心

Question

我有这个代码。

          <ul style="list-style-type:square">
            <li><img src="Files/Images/001.png"></li>
            <li><img src="Files/Images/002.png"></li>
            <li><img src="Files/Images/003.png"></li>
        </ul> 

标记似乎位于图像底部的对齐处，如何将其与中心对齐？

Answer 1

您可以移除项目符号并使用:before伪元素代替Flexbox进行垂直对齐。

 li { list-style-type: none; display: flex; align-items: center; } img { border: 1px solid black; } li:before { content: "■"; margin-right: 15px; }

 <ul> <li><img src="http://placehold.it/100x100"></li> <li><img src="http://placehold.it/100x100"></li> <li><img src="http://placehold.it/100x100"></li> </ul>

Answer 2

您可以用 span 包裹li标签的内容，然后对其应用 CSS 相对位置。

您的样式表将是：

ul span {
  display: inline-block;
  position: relative;
  top: 5px; /* to adapt to the size of your image */
}

还有你的 HTML：

<ul>
  <li><span><img src="Files/Images/001.png"></span></li>
  <li><span><img src="Files/Images/002.png"></span></li>
  <li><span><img src="Files/Images/003.png"></span></li>
</ul>

我没有你的图片，但如果你的图片有不同的高度，你需要为每个图片定义一个特定的位置。 然后你将有： ul span { display: inline-block; 位置：相对； } .li1 { 顶部：25px; /* 无论第一张图像的大小是多少 */ } 等等…

还有你的 HTML：

<ul>
  <li><span class="li1"><img src="Files/Images/001.png"></span></li>
  <li><span class="li2"><img src="Files/Images/002.png"></span></li>
  <li><span class="li3"><img src="Files/Images/003.png"></span></li>
</ul>

顺便说一下，我不明白你为什么有那个td标签。

Answer 3

要对齐li标记，您需要对齐li内的元素。
这是因为::marker锚定到li内的元素。

 li { width: 350px; } div { display: inline-block; vertical-align: middle; }

 <ul> <li> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua... </div> </li> </ul>