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

我有一个图像滑块的div，在div里面我有ul里面，我有一些图像具有不同的大小。我的要求是放置图像是中心对齐以及垂直对齐中间。我的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; 
    }

来源

2010-11-25 Soarabh

我想你已经得到的东西多一点复杂得多，他们需要。首先，图像'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>

来源

2010-11-25 11:00:35 roborourke

嘿sanchothefat，谢谢，经过几次修改它对我来说工作得很好。不需要使用这个.placesAlbumSlide .spamPlaceImages {{0}} {0} {0} line-height：1; //将其设置回正常行高 } – Soarabh 2010-11-25 11:24:59

添加属性align="center“你<div>这将使你的所有的div内容居中对齐

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

来源

2010-11-25 11:01:12 Romani

你应该把你的图像分成两部分：

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

来源

2013-05-23 11:00:48 macloving

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

回答

相关问题