Как вертикально центрировать изображения внутри элемента LI? - PullRequest
Новая
       0

Как вертикально центрировать изображения внутри элемента LI?

5 голосов
/ 29 февраля 2012

Я использую jQuery mobile и пытаюсь центрировать некоторые значки изображений в списке.Проблема, с которой я столкнулся, заключается в том, что изображения не центрированы вертикально внутри элемента списка.

Может ли кто-нибудь любезно указать мне правильное направление, поскольку я далеко не эксперт по CSS.Я знаю, что могу получить их, используя таблицы, но я не хочу этого делать.Спасибо.

О, и я использую EJS в коде м ниже.ПОЖАЛУЙСТА, ВИДИТЕ СНИМОК ЭКРАНА:

http://imgur.com/uIXuC

Вот мой код: 

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

Ответы [ 3 ]

9 голосов
/ 29 февраля 2012

Пример Live :

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-вертикальный-горизонтальный-an-image /

1 голос
/ 06 января 2017

Я знаю, что опаздываю на вечеринку, но я всегда использую это и думал, что кто-то может найти это полезным.

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;
}
0 голосов
/ 02 января 2017

Просто примените маржу к 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

...