在DIV中水平和垂直对齐图像

Question

我试图水平和垂直对齐DIV中的图像。 问题是我尝试了几种方法，但没有一种对我有用。

这是我正在使用的代码：

的CSS

img{
    max-width:100%;
    vertical-align: middle;
}

#slika {
float: center;
height: 126px;
width: 111px;
text-align: center;
}

的HTML

<div id="slika">
<img src="images/2105602.png" width="auto" height="auto" alt="2105602.png">
</div>

jsfiddle： 此处

Soemone可以和我分享他的想法吗？ 我找不到解决方法。 它始终保持在顶部对齐。

Answer 1

JSFiddle- 演示

img {
    max-width:100%;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}
#slika {
    height: 126px;
    width: 111px;
    text-align: center;
    border: 1px #000 solid;
}

Answer 2

您可以通过添加50％的边距，然后再加上-（imageheight / 2）的顶部来实现

 img{
    max-width:100%;
    vertical-align: middle;
    margin-top:50%;
    position:relative;
    top:-37px;
}

#slika {
float: left;
height: 126px;
width: 111px;
text-align: center;
border:1px solid red;
}

在这里提琴： http : //jsfiddle.net/dduygx0x/2/

Answer 3

这是我使用通用表-table-cell方式为您解决的问题的解决方案：

我将您的图片包裹在新的div中：

<div id="slika">
    <div class="img-wrapper">
       <img ....>
    </div>
</div>

并更改了CSS：

img{
    max-width:100%;
}

.img-wrapper{
    display: table-cell;
    vertical-align: middle;
}

#slika {
    display: table;
    float: left;
    height: 126px;
    width: 111px;
    text-align: center;
    vertical-align: middle;
}

  img{ max-width:100%; } .img-wrapper{ display: table-cell; vertical-align: middle; } #slika { border: 1px solid black; display: table; float: left; height: 126px; width: 111px; text-align: center; vertical-align: middle; } 

  <div id="slika"> <div class="img-wrapper"> <img src="http://tommyvirtualnikatalog.com.hr/images/akcija/prehrana/2105602.png" width="auto" height="auto" alt="2105602.png"> </div> </div> 

这种解决方案的好处在于它绝对动态，可以轻松做出响应！！

Answer 4

而不是使用硬编码的属性（随图像的变化而改变）或使用在旧版浏览器中无法使用的transform属性来定位图像，您只需将图像包装在p并设置line-height以匹配框

p{
 line-height: 126px;
 margin: 0;
 padding: 0;
}

JSFIDDLE

Answer 5

我经常使用的解决方案是在图像旁边添加一个空的span元素，

#slika span {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

这个想法是，垂直对齐是相对于其同级的，因此，一个孤独的元素没有任何作用。 这种方法的好处是它完全动态，没有固定的像素，可以在较旧的环境中使用（请确保测试是否满足最低端要求），并且不会影响容器div。 缺点是多余的html。