¿Cómo centrar verticalmente las imágenes dentro de un elemento LI?

Estoy usando jQuery Mobile y estoy tratando de centrar algunos iconos de imagen dentro de una lista. El problema que tengo es que las imágenes no están centradas verticalmente dentro de un elemento de la lista.¿Cómo centrar verticalmente las imágenes dentro de un elemento LI?

¿Puede alguien señalarme amablemente en la dirección correcta ya que no soy un experto en CSS por el momento. Sé que puedo conseguirlos usando tablas, pero no quiero hacer eso. Gracias.

Oh y estoy usando EJS en el código m a continuación. POR FAVOR ver la instantánea:

http://imgur.com/uIXu C

Aquí está mi código:

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

Fuente

2012-02-29 jini

T La respuesta dependerá de cómo se establezca la imagen con respecto a las * otras * cosas dentro del li. ¿Puedes colaborar en eso? – Faust

algo seguro. así que mi elemento li tiene 3 imágenes puestas una al lado de la otra alineadas verticalmente en la parte superior de la misma. así como [img some img img] – jini

Lo siento, ¿pueden aclarar qué quiere decir con "... alineados verticalmente en la parte superior de la misma manera". – Faust

vivo Ejemplo:

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

encontrado este artículo: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

Fuente

2012-02-29 14:10:36

la altura está determinada por jQuery Mobile. ¿Debo agregarlo manualmente en CSS? – jini

Debería hacer dinámicamente que la altura de la línea siempre coincida con la altura del elemento. – Maroshii

Basta con aplicar el margen sobre 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

Fuente

2017-01-02 09:26:55 Rajdeep

Sé que llego tarde a la fiesta, pero siempre uso esto y pensé que alguien podría considerar útil ..

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

Fuente

2017-01-06 15:56:07 tatty27

¿Cómo centrar verticalmente las imágenes dentro de un elemento LI?

Respuesta

Cuestiones relacionadas