如何在LI元素中垂直居中放置圖像？

我正在使用jQuery手機，並試圖將一些圖像圖標集中在列表中。我遇到的問題是圖像不是在列表項中垂直居中。如何在LI元素中垂直居中放置圖像？

有人能指點我，因爲我不是一個CSS專家。我知道我可以讓他們用桌子，但我不想這樣做。謝謝。

哦，我在下面的m代碼中使用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>

來源

2012-02-29 jini

T他的回答將取決於圖像如何針對裏面的其他*內容展開。你可以精心策劃嗎？ – Faust 2012-02-29 13:34:47

肯定的事情。所以我的li元素有3個並排的圖像在頂部垂直對齊。所以像[img some text img img] – jini 2012-02-29 13:39:22

對不起 - 你能否澄清你的意思是「......垂直對齊在頂部。」 – Faust 2012-02-29 13:56:35

活生生的例子：

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/

來源

2012-02-29 14:10:36

高度由jQuery Mobile決定。我是否需要在CSS中手動添加它？ – jini 2012-02-29 15:42:37

您應該叮囑道，行高始終與元素的高度相匹配。 – Maroshii 2012-02-29 16:12:54

在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

來源

2017-01-02 09:26:55 Rajdeep

我知道我遲到了，但我一直用這個，以爲有人可能會發現它有用..

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

來源

2017-01-06 15:56:07 tatty27

如何在LI元素中垂直居中放置圖像？

回答

相關問題