图像应居中对齐，也应垂直居中对齐

Question

我有一个用于图像滑块的div，在那个div里面我有ul li，我有一些不同大小的图像。我的要求是放置图像是居中对齐以及垂直居中对齐。我的html标记是

<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

将“attribute align="center”添加到你的<div>。这将使你所有的div内容居中对齐。

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

Answer 3

您应该将图像包装在div中，如下所示：

<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>