CODEWITHSUNDEEP
htmlcssimagevertical-alignment
Areku_UA
Areku_UA

Reputation: 311

Vertical-align: middle - img in div (different size picture)

I was not successful CSS. Should be in the center of the picture (different size) in the div. See an example:

image example

And examples of html and css - http://jsfiddle.net/KJXUt/

HTML: 

<div class="box">
  <a href="#" class="pic">
    <img src="http://pics.posternazakaz.ru/pnz/product/small_x2/97/61/ccc0980cde08f9032cd665f7104aca10.jpg" alt="" width="300" height="130" />
  </a>
</div>
<div class="box">
  <a href="#" class="pic">
    <img src="http://www.22.ru/ow_userfiles/plugins/photo/photo_preview_137.jpg" alt="" width="140" height="140" />
  </a>
</div>​

CSS:

body {
    background: #D6E8FF;
}
.box {
    border: #555 1px solid;
    margin-right: 10px;
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: table-cell;          /* <-- problem */
    vertical-align: middle;       /* <-- problem */
}
img {
    max-width: 100px;
    height: auto;
}

​

How to correct style? Help, please. Thanks in advance

Upvotes: 1

Views: 3322

Answers (3)

extramaster
extramaster

Reputation: 2653

The term to make a picture smaller without re-sizing it is called "cropping", to directly achieve your answer, a different css property: background will be used. And the div's will be removed. @Heliio's method is great if you need <div> tags.

A code sample is as following HTML:

<a href="#" class="pic pic1">
&nbsp;
</a>

CSS:

.pic {
    display:inline-block;
    border: #555 1px solid;
    margin-right: 10px;
    width: 100px;
    height: 100px;
}

.pic1{
 background: transparent url(http://mw2.google.com/mw-panoramio/photos/medium/62256112.jpg) -20px -200px no-repeat;
}

Note that the css has some negative values, these are extremely tedious to modify, but it's really just -((imagewidth-100)/2) x -((imageheight-100)/2)

http://jsfiddle.net/KJXUt/9/

Upvotes: 1

Helio Bentzen
Helio Bentzen

Reputation: 677

When you use display: table-cell; it's forcing to fixed size to the cells. Maybe it's not a good solution.

I dont understand, if want really it, but:

body {
    background: #D6E8FF;
}
.box {
    border: #555 1px solid;
    float:left;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
img {
    max-width: 100px;
}

Example here: http://jsfiddle.net/KJXUt/1/

Or, if prefer: http://jsfiddle.net/KJXUt/3/

Upvotes: 1

AntonNiklasson
AntonNiklasson

Reputation: 1749

This is a simple technique to center the image vertically in .box

http://codepen.io/AntonNiklasson/pen/pkaov

To add more boxes next to eachother, add float: left to .box

Upvotes: 0

Related Questions