6

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

3 に答える 3

11

実例：

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-horizo​​ntal-an-image/

于 2012-02-29T14:10:36.717 に答える
2

パーティーに遅れていることは知っていますが、いつもこれを使っていて、誰かが役に立つかもしれないと思っていました。

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-06T15:56:07.983 に答える
0

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-02T09:26:55.107 に答える