Html 如何在LI元素中垂直居中图像?
我正在使用jquerymobile,并试图在列表中居中显示一些图像图标。我遇到的问题是图像在列表项中没有垂直居中 有人能帮我指出正确的方向吗?因为到目前为止我还不是CSS专家。我知道我可以用表格得到它们,但我不想那样做。谢谢 哦,我在下面的m代码中使用EJS。请参见屏幕截图: C 这是我的密码:Html 如何在LI元素中垂直居中图像?,html,css,jquery-mobile,ejs,Html,Css,Jquery Mobile,Ejs,我正在使用jquerymobile,并试图在列表中居中显示一些图像图标。我遇到的问题是图像在列表项中没有垂直居中 有人能帮我指出正确的方向吗?因为到目前为止我还不是CSS专家。我知道我可以用表格得到它们,但我不想那样做。谢谢 哦,我在下面的m代码中使用EJS。请参见屏幕截图: C 这是我的密码: <li data-icon="false"> <a href="#"> <img src="images/img_t
<li data-icon="false">
<a href="#">
<img src="images/img_trans.gif" class='largePlatform platform_<%= releases[i].platform_abbr %>_large' width='30' height='30' style="position:absolute; top:25%; left:10px"/>
<h2 style="position:absolute; top:25%; left:50px"><%= releases[i].platform_abbr %></h2>
<div data-role="controlgroup" data-type="horizontal" style="float:right" >
<% if (purchaseText != "") { %>
<img src="images/game_detail/<%= releases[i].purchase_button_icon %>-purchase.png" width="35" height="35" onclick="window.open('<%= releases[i].purchase_button_url %>');" alt="<%= purchaseText %>" style="position:relative; top:10px;"/>
<% } %>
<div data-role="button" data-icon="reminder" data-theme="<%= buttonTheme %>" onclick="<%= buttonAction %>(<%= releases[i].id %>)">
<%= buttonText %>
</div>
</div>
</a>
</li>
现场示例:
HTML
<li>
<img src="http://dummyimage.com/20x20/000/000000.png" />
</li>
找到这篇文章:只需在img上应用margin
<li>
<img class="image-style" src="https://dummyimage.com/20x20/000/111fed" />
</li>
.image-style {
margin : 10px -10px;
}
li {
border : 1px solid black
}
1.形象风格{
利润率:10px-10px;
}
李{
边框:1px纯黑
}
我知道我来晚了,但我总是用这个,我想有人会觉得它有用 HTML
<ul>
<li class="logo_bar"><img src="img/1" /></li>
<li class="logo_bar"><img src="img/2" /></li>
<li class="logo_bar"><img src="img/3" /></li>
<li class="logo_bar"><img src="img/4" /></li>
<li class="logo_bar"><img src="img/5"/></li>
</ul>
答案将取决于图像相对于li内其他东西的布局。你能解释一下吗?当然。因此,我的li元素有3个并排设置的图像,它们在同一个顶部垂直对齐。比如[img some text img img]对不起,你能澄清一下你所说的“…在顶部垂直对齐”是什么意思吗?还有:你的李有固定的高度吗?@Faust:请看我上面添加的图片。如您所见,这些图像似乎彼此不对齐。我只想让它们对齐。是的,li似乎有一个固定的高度。该高度由jQuery Mobile确定。我需要在CSS中手动添加它吗?你应该让线条的高度始终与元素的高度相匹配。
<ul>
<li class="logo_bar"><img src="img/1" /></li>
<li class="logo_bar"><img src="img/2" /></li>
<li class="logo_bar"><img src="img/3" /></li>
<li class="logo_bar"><img src="img/4" /></li>
<li class="logo_bar"><img src="img/5"/></li>
</ul>
.logo_bar {
display: inline-block;
vertical-align: middle;
}