CODEWITHSUNDEEP
htmlcss
Soarabh
Soarabh

Reputation: 2960

Image should be center align as well as vertical align middle

I have a div for image slider,inside that div I have ul li inside that i have some image with diffrent sizes. My requirment is to place image is center align as well as vertical align middle. my html markp is 

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

Used 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;
    }

Upvotes: 1

Views: 2567

Answers (3)

macloving
macloving

Reputation: 1277

You should wrap you image in div twice as this:

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

Upvotes: 0

Romani
Romani

Reputation: 3241

Add attribute align="center" to your <div>. This will make all your div content to centered align.

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

Upvotes: 0

roborourke
roborourke

Reputation: 12217

I think you've got things a little more complicated than they need to be. First the attribute on the images 'align' is no longer valid or necessary and you have some duplicated class names on the list items.

The extra span is not needed either. Try the following:

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

There shouldn't be any need for the position relative rules. And you can ditch the .placesAlbumSlide span rule altogether.

Your list item mark up can then look like this:

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

Upvotes: 1

Related Questions