0

私の HTML5/CSS は次のようにレンダリングされています: http://imgur.com/0rixh

次のコードを使用します。

                <li>
                    <div class="name">Booger Jet.zip</div>
                    <progress max="100" value="60"></progress>
                    <div class="control"></div>
                    <div class="status">12 MB / 21 MB   240 kB/s</status>
                </li>

#uploads li progress {
    width: 317px;
    margin-bottom: 4px;
}

#uploads li .control {
    width: 14px;
    height: 14px;
    display: inline-block;
    opacity: 0.6;
    background-image: url('../img/stop_button.png');
}

それらを垂直方向に揃えるにはどうすればよいですか? 私のオプションは何ですか？ありがとうございました！

4

2 に答える 2

1

それを試してみてください

#uploads li progress {
    width: 317px;
    margin-bottom: 4px;
    margin-top:1px; /* change it if you need more top sapce*/
}
#uploads li .control {
        width: 14px;
        height: 14px;
        display: inline-block;
        vertical-align:top;
        opacity: 0.6;
        background-image: url('../img/stop_button.png');
    }
于 2012-11-10T17:41:04.723 に答える
0

これには、 vertical-align:middleを使用できます。

#uploads li .control, #uploads li progress{
 display:inline-block;
 vertical-align:middle;
}
于 2012-11-10T17:10:30.283 に答える