[英]Text align vertical within li
<ul id = "Software">
<li id = "pdf1"> <img src="/Content/img/pdf.png">Catalogue</li>
<li id = "pdf2"> <img src="/Content/img/pdf.png">Manual Data</li>
<li id = "pdf3"> <img src="/Content/img/pdf.png">Technical Data</li>
<li id = "software1">Software</li>
</ul>
列表元素中的文本显示在底部。 如何将其与图像对齐?
li img { vertical-align: middle; }
ul li{
list-style:none;
display:inline-block;
height:40px;
line-height:40px;
}
li img{
float:left;
margin:5px;
}
您需要为li
元素设置一个height
和相同的line-height
;
对于包含的图像-设置float : left
设置相同的height
和line-height
。 这将达到目的。
要对齐文本和图像,可以在图像元素上使用margin-bottom:-5px
,数字取决于图像的大小。
我认为您正在寻找vertical-align
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.