画像は中央揃えと垂直揃えの中間にする必要があります

Question

画像のスライダのdivがあります。div内にはul liがあり、異なるサイズの画像があります。私の必要条件は、画像を中央に配置することと、縦に中心を合わせることです。 私のhtml markpは、私はあなたが彼らが必要以上に物事はもう少し複雑なんだと思います

<div id="placesAlbumSlidesContainer"> 
      <ul style="width: 50000px;" id="placesAlbumSlideInner"> 

       <li id="image-1" class="placesAlbumSlide placesAlbumSlide"> 
        <span> 

         <img align="center" alt="" src="/1-original.jpg"> 

         <span title="Report as inappropriate" class="spamPlaceImages" onclick=""><span class="spamPlaceImagesIn"></span></span> 
        </span> 
       </li> 

       <li id="image-2" class="placesAlbumSlide placesAlbumSlide"> 
        <span> 

         <img align="center" alt="www.geocaching.com|http://www.geocaching.com|Friday, Oct 29, 2010" src="http://fabulis-place-images.s3.amazonaws.com/development/4-original.jpg"> 

         <span title="Report as inappropriate" class="spamPlaceImages" onclick=""><span class="spamPlaceImagesIn"></span></span> 
        </span> 
       </li> 

      </ul> 
      </div> 

使用するCSS

#placesAlbumSlideshow #placesAlbumSlidesContainer { 
    margin:0 auto; 
    overflow:hidden; 
    position:relative; 
    width:482px; 
    } 
    #placesAlbumSlideshow #placesAlbumSlidesContainer .placesAlbumSlide { 
    float:left; 
    height:280px !important; 
    position:relative; 
    width:560px; 
    } 
    .placesAlbumSlide span { 
    display:inline-block; 
    position:relative; 
    text-align:center; 
    vertical-align:middle; 
    } 

    .placesAlbumSlide img { 
    border:medium none; 
    display:inline; 
    margin-left:-80px; 
    max-height:280px; 
    position:relative; 
    width:auto; 
    z-index:2; 
    } 
    .placesAlbumSlide { 
    text-align:center; 
    } 

Answer 1

です。最初に、画像 'align'の属性はもはや有効ではなく、リスト項目にいくつか重複したクラス名があります。

spanも不要です。以下を試してください：

.placesAlbumSlide { 
    vertical-align: middle; 
    text-align: center; // this will ensure the horizontal alignment is correct 
    float: left; 
    height: 280px; 
    line-height: 280px; // this will ensure the vertical alignment is correct 
    width: 560px; 
} 
.placesAlbumSlide img { 
    display: inline-block; // forces the image to obey inline rules like vertical-align and text-align 
    max-height: 280px; 
    width: auto; 
} 
.placesAlbumSlide .spamPlaceImages { 
    line-height: 1; // set this back to a normal line-height 
} 

位置関係のルールは必要ありません。そして、あなたは.placesAlbumSlide spanルールを完全に取り除くことができます。

あなたのリスト項目のマークアップは、次のようになります。。

<li id="image-2" class="placesAlbumSlide"> 
    <img align="center" alt="www.geocaching.com|http://www.geocaching.com|Friday, Oct 29, 2010" src="http://fabulis-place-images.s3.amazonaws.com/development/4-original.jpg" /> 
    <span title="Report as inappropriate" class="spamPlaceImages" onclick=""><span class="spamPlaceImagesIn"></span></span> 
</li> 

Answer 2

は、あなたの<div>に「属性align="centerを追加します。これは、中央に整列するために、すべてのあなたのdivコンテンツを行います

<div id="placesAlbumSlidesContainer" align="center"> 
    . 
    . 
    </div> 

Answer 3

あなたはすべきdivの画像を次のように2回折り返します。

<div width="200px" height="100px" class="outer" style="display: table;position: static;height: 9.22em;"> 
    <div class="inner" style="display: table-cell;vertical-align: middle;position: static;"> 
    12345 
    </div> 
</div>