CODEWITHSUNDEEP
htmlcss
Learning
Learning

Reputation: 20011

show images of different dimension in center of a div of fixed size

I am grabbing news from different website & want to show them as show as example

http://jsfiddle.net/r55Er/1/

Problem is with the image, Images associate with articles are of different dimension.

I have an image container 'div' of 80x80 pixels and i want to display image in center both vertically & horizontally

I want to show image in best possible way ...

I would appreciate help in this regarding or how i show image in best possible way without hurting the design.

<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://gulfnews.com/media/img/gulfnews_logo.png"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://i.cdn.turner.com/cnn/.e/img/3.0/global/header/intl/hdr-globe-central.gif"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://news.bbcimg.co.uk/media/images/65881000/jpg/_65881249_65881241.jpg"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>
<div class="news-wrapper">
    <div class="news-image"><img class="img" src="http://www.zawya.com/images/cia/large/130213070447ptjw.jpg"/></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>

Upvotes: 0

Views: 1534

Answers (3)

dinodsaurus
dinodsaurus

Reputation: 5095

You need to position:absolute your images and position:relative yourr news-wrapper and then give top:0;bottom:0;margin:auto to your image. I edited your fiddle and you can check it here jsFiddle

Upvotes: 3

starikovs
starikovs

Reputation: 3398

To align an image vertically in the middle, try to set line-height equal to height for the container and set dispaly inline-block with "vertical-align middle" for the image. To align horizontally, just set "text-align center" for the image container.

.image-container {
     text-align: center;
     line-height: 80px; /* equals to container height */
}
img {
    display: inline-block;
    vertical-align: middle;
}

Here's modified sample in jsfiddle

Upvotes: 2

Milche Patern
Milche Patern

Reputation: 20482

if your images are relatively around 80 x 80 pixels, just apply them has a background of your cell. This way it will always be centered .. never overflow .. etc etc.

<div class="news-wrapper">
    <div class="news-image" style="background-image:url('http://www.zawya.com/images/cia/large/130213070447ptjw.jpg';"></div>
     <div class="news-title"> News Title 1</div>
     <div class="news-source"> Source 1</div>
     <div class="news-description"> Some Descriptionn</div>
</div>

.news-image {
    width:80px;
    height:80px;
    background-attachment:scroll;
    background-color:transparent;
    background-position:50% 50%;
    background-repeat:no-repeat
}

Upvotes: 3

Related Questions