2

HTML IMGタグを使用して画像をソース/リンクし、それをdivの中央に配置したいのですが、あまり成功していません。

私のhtmlは：

     <div class="alimgholder">
<img  title="<?php echo $album_title;?>" alt="<?php echo $album_title;?>" src="<?php echo $album_pic;?>">
     </div>

私のCSSは次のとおりです。

              .alimgholder
             {
             width:160px;
             height:120px;
             overflow:hidden;
             float:left;
             }
             .alimgholder img
             {

             background-color: #EEEEEE;
             background-position: center 25%;
             background-repeat: no-repeat;
             display: block;
             }
4

3 に答える 3

4

divのみのcssを設定します-

.alimgholder
         {
         width:160px;
         height:120px;
         overflow:hidden;
         float:left;
         background-image: url(path/to/your_image);
         background-color: #EEEEEE;
         background-position: center 25%;
         background-repeat: no-repeat;
         display: block;
         }

動的な問題については、imgタグを使用して画像を読み込むことができますが、画像を非表示にしてそのsrcを読み取るだけで、jQueryで背景を設定できます。

 $("#div_id").css("background-image", $("#img_id").attr("src"));
于 2012-06-09T19:33:07.667 に答える
0 
.alimgholder
{
     ...
     text-align: center;
}

それ以外の場合は、画像の背景画像を揃えています。

編集：画像をdivの背景として定義する場合は、cssから画像をロードし、imgタグを忘れる必要があります。

.alimgholder
{
     background: url(path/to/image) center no-repeat;
     ...
}
于 2012-06-09T19:03:32.073 に答える
0

div内に画像しかない場合は、次を使用できます。

margin-left: auto;
margin-right: auto;

CSSコード内.alimgholderですが、これによりコンテンツ全体が<div>水平方向に中央揃えになります。

于 2012-06-09T19:22:16.860 に答える