如何在LI元素内垂直居中图片？

Question

我正在使用jQuery mobile，试图使列表中的一些图像图标居中。问题是图像在列表项内部垂直方向上没有居中显示。

请问有人能指点我正确的方向吗？因为我并不是一位CSS专家。我知道可以使用表格来实现，但我不想这样做。谢谢。

另外，下面的代码中我使用了EJS。请看截图：

这是我的代码：

<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>

- Strong Like Bull

---

答案取决于图像与li内的其他内容的布局。您能详细说明一下吗？ - Faust

当然可以。所以我的li元素有3个图像并排设置，所有图像都垂直对齐在顶部。就像[img一些文本 img img]这样。 - Strong Like Bull

抱歉 - 你能否请澄清一下你所说的“...垂直对齐在顶部相同”的意思？ - Faust

另外，你的li元素高度是固定的吗？ - Faust

@Faust：请查看我上面添加的图片。正如您所看到的，这些图像似乎没有对齐。我只想让它们对齐。是的，li具有固定高度。 - Strong Like Bull

啊，那很简单。flackend的解决方案应该可以解决问题（+1）。 - Faust

Answer 1

现场演示:

http://jsfiddle.net/B6Z9N/

HTML

<li>
    <img src="http://dummyimage.com/20x20/000/000000.png" />
</li>​

CSS

li {
    border: 1px dotted black; /* Just to illustrate height */

    height: 100px;
    line-height: 100px;
    vertical-align: middle;
}​

发现了这篇文章：http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

翻译：发现了这篇介绍如何将图片垂直水平居中的CSS技巧文章。

- jared_flack

---

高度由jQuery Mobile确定。我需要在CSS中手动添加吗？ - Strong Like Bull

你应该动态地设置行高，使其始终与元素的高度匹配。 - Maroshii

Answer 2

我知道我来晚了，但我一直在使用这个，并且认为有人可能会觉得它有用。

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>

CSS：

.logo_bar {
    display: inline-block;
    vertical-align: middle;
}

- tatty27

Answer 3

只需在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: JSFiddle}}

- Rajdeep

Answer 4

<style>

.logo_bar {
display:inline-block;
vertical-align: middle;
}
.icon-align{
vertical-align: middle;
}
</style>
<ul>
<li class="logo_bar"><img class="icon-align" src="modal-box-icon/ok.svg" />
Menu 1
</li>
<li class="logo_bar"><img class="icon-align" src="modal-box-icon/ok.svg" />
Menu 1
</li>
<li class="logo_bar"><img class="icon-align" src="modal-box-icon/ok.svg" />
Menu 1
</li>
<li class="logo_bar"><img class="icon-align" src="modal-box-icon/ok.svg" />
Menu 1
</li>
</ul>

- Irewangjing Wangjing

---

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - undefined