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

将属性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>

图像应该是中心对齐以及垂直对齐中间

3 个答案: