Comment verticalement centre des images à l'intérieur d'un élément LI?

Je suis à l'aide de jQuery mobile et suis en train de centre de certaines icônes d'image dans une liste. Le problème que j'ai c'est que les images ne sont pas centrés verticalement à l'intérieur d'un élément de liste.

Quelqu'un peut-il bien vouloir me pointer dans la bonne direction puisque je ne suis pas un CSS expert de loin. Je sais que je peux les obtenir à l'aide de tableaux, mais je ne veux pas le faire. Merci.

Oh, et je suis en utilisant EJS en m code ci-dessous. CONSULTEZ LA CAPTURE D'ÉCRAN:

http://imgur.com/uIXuC

Voici mon code:

<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>
La réponse dépendra de la manière dont l'image fixe à l'égard de la trucs à l'intérieur de la li. Pouvez-vous ellaborate sur qui?
une chose est sûre. donc, mon élément li a 3 images mises côte à côte, tous alignés verticalement en haut de la même. donc, comme [img texte img img]
Désolé -- pouvez-vous préciser ce que vous entendez par " ... alignés verticalement en haut de même."
Aussi: votre li, ont une hauteur fixe?
veuillez voir l'image, j'ai ajouté ci-dessus. Comme vous pouvez le voir, les images semblent ne pas être alignés l'un avec l'autre. Je veux juste alignés. Oui il semblerait que le li a une hauteur fixe.

OriginalL'auteur jini | 2012-02-29

  1. 9

    Live Exemple:

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

    Trouvé cet article: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

    la hauteur est déterminée par jQuery Mobile. Ai-je besoin d'ajouter manuellement dans le CSS?
    Vous devriez dinamically faire que la hauteur de la ligne correspond toujours à la hauteur.

    OriginalL'auteur jared_flack

  2. 0

    Il suffit d'appliquer la marge sur 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

    OriginalL'auteur Rajdeep

  3. 0

    Je sais je suis en retard à la fête, mais je l'utilise toujours et de la pensée que quelqu'un pourrait trouver utile..

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

    OriginalL'auteur tatty27