如何在 LI 元素中垂直居中图像？答案

【问题标题】：How to vertically center images within an LI element?如何在 LI 元素中垂直居中图像？
【发布时间】：2012-03-18 23:52:04
【问题描述】：

我正在使用 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>

【问题讨论】：

答案将取决于图像相对于 li 中的 other 内容的布局方式。你能详细说明一下吗？
确定。所以我的 li 元素有 3 个并排设置的图像，它们都在顶部垂直对齐。就像 [img some text img img]
对不起——你能澄清一下你所说的“......在顶部垂直对齐”是什么意思。
还有：你的li会有固定的高度吗？
@Faust：请看我上面添加的图片。如您所见，图像似乎彼此不对齐。我只希望它们对齐。是的，看起来 li 的高度是固定的。

标签： html css jquery-mobile ejs

【解决方案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/

【讨论】：

高度由 jQuery Mobile 决定。是否需要在 CSS 中手动添加？
你应该动态地使 line-height 始终与元素的高度匹配。

【解决方案2】：

只需在 img 上应用边距。

<li>
    <img class="image-style" src="https://dummyimage.com/20x20/000/111fed" />
</li>

.image-style {
   margin : 10px -10px;

}

li {
  border : 1px solid black
}

JSFiddle

【讨论】：

【解决方案3】：

我知道我迟到了，但我总是使用它，并认为有人会觉得它有用。

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

【讨论】：