垂直对齐:中间 - div中的图像(不同大小的图片)

时间:2012-10-25 10:38:57

标签: html css image vertical-alignment

我没有成功的CSS。应位于div中图片的中心(不同大小)。查看示例:

image example

html和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;
}

如何纠正风格?请帮忙。提前致谢

3 个答案:

答案 0 :(得分:1)

使用display:table-cell;它迫使细胞固定大小。也许这不是一个好的解决方案。

我不明白,如果真的想要,但是:

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

此处示例:http://jsfiddle.net/KJXUt/1/

或者,如果愿意:http://jsfiddle.net/KJXUt/3/

答案 1 :(得分:1)

在不重新调整大小的情况下缩小图片的术语称为“裁剪”,直接达到您的答案,将使用不同的css属性:background。 div将被删除。如果您需要<div>代码,@Heliio's method非常棒。

代码示例如下 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;
}

请注意,css有一些负值,修改起来非常繁琐,但实际上只是-((imagewidth-100)/2) x -((imageheight-100)/2)

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

答案 2 :(得分:0)

这是一种在.box

中垂直居中图像的简单技巧

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

要在彼此旁边添加更多框,请将float: left添加到.box