1

divコンテナで垂直方向に画像を表示する方法は?

添付したコードの最後の列に配置された画像「setting.png」。解決策をアドバイスしてください。

.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}

.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}

.tableCol{
float: left;
height: 40px;
line-height: 40px;
}

<div class="table">
    <div class="tableRow">
        <div class="tableCol" style="width:10%; text-align:center;">1</div>
        <div class="tableCol" style="width:40%">Michael</div>
        <div class="tableCol" style="width:40%">webexp@gmail.com</div>
        <div class="tableCol" style="width:10%;">
        <a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle"  /></a>
        </div>
    </div>  
</div>
4

4 に答える 4

0

追加するだけです&nbsp;（リンクの前にスペース）

  <div class="table">
        <div class="tableRow">
            <div class="tableCol" style="width:10%; text-align:center;">1</div>
            <div class="tableCol" style="width:40%">Michael</div>
            <div class="tableCol" style="width:40%">webexp@gmail.com</div>
            <div class="tableCol" style="width:10%;">&nbsp;
            <a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle"  /></a>
            </div>
        </div>  
    </div>

より良い解決策:
これをcssに追加します:

img {
margin-top:10px;
}
于 2012-08-25T13:39:42.087 に答える
0

position: absolute;でこれを行うことができます。settings.png 画像のサイズ (この例では 20px x 20px) がわかっている場合。

設定画像の周りにクラスtableColSettingsを追加します。<a>次に CSS を追加します。

.tableColSettings{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px; /* Half image dimensions */
    width: 20px;
    height: 20px;
    line-height: 0;
}
.tableColSettings img{
    width: 100%;
}

設定画像は、高さに関係なく、常に要素の中心に留まります。ここに実用的なフィドルがあります: http://jsfiddle.net/384pa/

お役に立てれば！

于 2013-11-27T04:25:43.093 に答える
0

ここで、これは機能するはずです: 中央に配置する必要がある画像を含む div にこれを追加します。

display:table-cell;
vertical-align:middle;

これにより、div のサイズやそれに含まれる画像に関係なく、画像が垂直方向に中央揃えになります。

于 2012-08-25T15:24:44.587 に答える
-3

Css には「vertical-align」というタグ名が付いています。解決策が得られる可能性があります。

于 2012-08-25T14:40:47.850 に答える