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

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

Answer 1

JSFiddle - DEMO

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

而不是使用硬编码属性（可能会根据图像而改变）或使用在旧浏览器中无法工作的转换属性来定位它，您只需将图像包装在p中并设置{{ 1}}以匹配框的高度

line-height

JSFIDDLE

Answer 5

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

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

这个想法是纵向对齐与其兄弟姐妹相关，因此一个单独的元素无法使用。这种方法的优点是它完全动态，没有固定的像素，适用于较旧的环境（确保测试它满足您的最低端要求）并且不会影响容器div。缺点是额外的HTML。

水平和垂直对齐DIV内的图像

5 个答案: