Question

请问如何将项目图像的div中的顶点图像链接居中？这是固定大小的div，我想要较小高度的图像是垂直对齐的。

由于某种原因，这不起作用。

.item-image {
    height: 256px;
    width: 256px;
    margin: auto;
    min-width: 256px;
}

.item-image a {
    display: block;
    margin-top: auto;
    margin-bottom: auto;

}

我想知道为什么它不起作用。

我也尝试过：

.item-image a { vertical-align：middle; 显示：table-cell; 身高：100％; }

但它也不起作用。

 <div class="item">
        <div class="item-image">
           <a href="/folder/download?target=%2Fimages1%2Fpng%2Fimage_48.png">
             <img src="/.tmb/l1_aW1hZ2VzMS9wbmcvaW1hZ2VfNDgucG5n.png" alt=""/>
           </a>
        </div>
 </div>

Answer 1

将此添加到您的班级

.item-image {
    position: relative;
}

.item-image a {
    position: absolute;
    top: 50%;
     left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

Answer 2

喜欢这个

<强> demo

<强> CSS

.item-image{
    display: table-cell;
    width: 256px;
    height: 256px;
  border:1px solid red;
    vertical-align: middle;
    text-align: center;
}

.item-image a {
    display: inline-block;
       border:1px solid red;
}

Answer 3

在CSS height

中添加.item-image a像素

.item-image a{vertical-align: middle; display: table-cell; height: 256px;}

Working example

Answer 4

我确实喜欢这个

img{width:50px; height:50px;position:relative; left:50%; margin-left:-25px}
.item-image:after{ content:""; display: inline-block;height: 100%;vertical-align: middle;}

<强> WORKING DEMO

此处有另一个选项

使用此CSS

.item-image img {
    display: block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;margin:auto;

}

此处 Demo New

如何在div中居链接图像

4 个答案: