[英]how to align marker to center of the image lists HTML
i have this code.我有这个代码。
<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>
the marker seems to be at the align at the bottom of the image, how can align it to the center?标记似乎位于图像底部的对齐处,如何将其与中心对齐?
You can remove bullets and use :before
pseudo element instead with Flexbox
for vertical align.您可以移除项目符号并使用: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>
You could wrap the content of your li
tags with a span, then apply a CSS relative position to it.您可以用 span 包裹li
标签的内容,然后对其应用 CSS 相对位置。
Your stylesheet would be:您的样式表将是:
ul span {
display: inline-block;
position: relative;
top: 5px; /* to adapt to the size of your image */
}
And your HTML:还有你的 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>
I don't have your images, but if your images have different heights, you would need to define a specific position for each one of them.我没有你的图片,但如果你的图片有不同的高度,你需要为每个图片定义一个特定的位置。 You would then have: ul span { display: inline-block;然后你将有: ul span { display: inline-block; position: relative;位置:相对; } .li1 { top: 25px; } .li1 { 顶部:25px; /* whatever the size of the first image is */ } etc… /* 无论第一张图像的大小是多少 */ } 等等…
And your HTML:还有你的 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>
I don't see why you have that td
tag by the way.顺便说一下,我不明白你为什么有那个td
标签。
To align a li
marker you need to align an element inside the li
.要对齐li
标记,您需要对齐li
内的元素。
This is due to ::marker
is anchored to the element inside the 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.