3

フロートされた div ブロックにロゴ イメージをロードするためのループがあります。stackoverflow からいくつかのヒントを試しましたが、ロゴを div 内の中央と中央に揃えることができませんでした。すべてのロゴの高さは固定されておらず、それぞれの高さが異なる場合があります。

<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
    <img width="78px" align="left" src="images/logo/logo1.jpg">     
</div>

助けてください、ありがとう。

4

6 に答える 6

2

ポジショニングを使用します。以下は私のために働いた...

画像の中心にズームすると（画像がdivを埋めます）：

    div{
        float:left;
        display:block;
        overflow:hidden;
        width: 70px; 
        height: 70px;  
        position: relative;
    }
    div img{
        min-width: 70px; 
        min-height: 70px;
        max-width: 250%; 
        max-height: 250%;    
        top: -50%;
        left: -50%;
        bottom: -50%;
        right: -50%;
        position: absolute;
    }

画像の中心にズームしない場合 (画像はdiv を埋めません):

   div{
        float:left;
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }
于 2016-03-24T08:48:43.313 に答える
1

CSS をstyle属性からファイルに移動する必要がstyle.cssあります。ただし、どうしても必要な場合は、以下のコードを現在のようにインライン スタイルに配置できます。

イメージ タグから属性を削除しalign="left"、イメージの表示を に設定しますblock。これによりmargin: 0 auto;、含まれている DIV 内で画像を中央に配置できます。

<table>希望する垂直方向のセンタリングを取得するには、CSS を使用してa を複製する必要があるようです。表のセルでは、垂直方向の中央揃えが可能です。これを行うために、クラスが.container. .containerDIV の表示は に設定されておりtable、.image-containerテーブル セルのように機能する DIV の表示は に設定されていtable-cellます。

CSS 

.container {
    float: left;
    width: 80px;
    height: 80px;
    padding: 8px;
    border: 1px solid #ccc;
    display: table;
}
.image-container {
    display: table-cell;
    vertical-align: middle;
}
.image-container img {
    display: block;
    margin: 0 auto;
}

HTML 

<div class="container">
     <div class="image-container">
          <img src="images/logo/logo1.jpg">
     </div>
</div>

JSFiddle: http://jsfiddle.net/MJ5j4/

于 2013-07-15T03:23:21.960 に答える
0

div内の真ん中にそれを取得しようとしている場合は、試しましたか:

<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
        <img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">     
    </div>

「margin-left:50%; margin-top:50%;」を使用しました。IMG タグの内側で、"align" および "float" 属性を取り除きました。この場合、おそらく「整列」を使用したくないでしょう。いずれにせよ、それが役立つことを願っています。

于 2013-07-15T03:11:57.067 に答える