3

を設定することで1行で実行できることはわかっていますがline-height、私のデータは複数行を占める可能性があります。display:table親と子の設定で何かやってみましdisplay:table-cellたが、うまくいきませんでした。

これが私のjsfiddleです

4

3 に答える 3

1

さて、私は jsFiddle を少しいじりました。これが私が思いついたものです:

http://jsfiddle.net/rVgkJ/7/

関連する CSS: 

.small_wrapper_div{
    width:100%;
    display:table;
}

.small_wrapper_div > div{
    display:table-cell;
    vertical-align: middle; 
}

.small_picture_div{
    width:50px;
    height:50px;
}

.small_picture_div img {
    width:50px;
    display:block;
}

.small_text_div{
    padding-left:10px;
}
于 2013-03-01T04:24:31.580 に答える
1

簡単に言えばposition: relative、含まれている div ( small_wrapper_div) に追加する必要があります。その後、以下を追加できます。

.small_text_div a {
    display: table-cell; 
    vertical-align: middle; 
    text-align: left;    
}

次の組み合わせに変更.small_text_divします。

.small_text_div {
    height:100%;
    padding-left:10px;
    width:250px;
    position: absolute;
    left:50px;
    top: 2px;  
    display: table; 
}

そして、テキストを垂直方向に中央揃えにします。

于 2013-03-01T04:29:57.047 に答える
0

テーブルを使用すると、簡単に縦に並べることができます

html

<table>
    <tr>
        <td class="image"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/02/Wild-Party.jpg"/></td>
        <td>Talib Kweli &#8211; Push Thru (DJ Friendship Remix)</td>
    </tr>
    <tr>
        <td class="image"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/02/Wild-Party.jpg"/></td>
        <td>Talib Kweli &#8211; Push Thru (DJ Friendship Remix)</td>
    </tr>
    <tr>
        <td class="image"><img src = "http://www.startingtofeelit.com/wp-content/uploads/2013/02/Wild-Party.jpg"/></td>
        <td>Talib Kweli – Push Thru <br />(DJ Friendship Remix)</td>
    </tr>
</table>

CSS

table td.image img{
    width:50px;
    height:50px;
}

デモ

于 2013-03-01T06:11:49.660 に答える