html - 如何在我的 div 中水平和垂直居中我的图像？

Question

图片大小不一。我正在使用一些 jquery 将它们按比例调整为 170px，以适应 180px #co-logo div。我怎样才能让他们在那个#co-logo 的中心排队？我找不到有效的解决方案。

#co-logo 
{
    float: left;
    width: 180px;
    height: 180px;
    margin: 20px 0 20px 20px;
    background-color: White;
    border: 1px solid #d6d5d5;
    text-align: center;
    position: relative;
}

#co-logo img
{
    position: absolute;
    top: 50%;
    left: 50%;

}

Answer 1

正如您在示例中看到的，图像位于中心(从左上角开始)。

为了让中心成为你想要的方式，我建议这个解决方案: How to make an image center (vertically & horizontally) inside a bigger div

因为您已经在使用 jQuery 来操纵图像的大小，所以以编程方式添加它们的 margin-top 和 margin-left(每个各占一半)。

编辑:

(我不知道你是如何放置图像大小的，你可能需要通过 $ 更改 height() 和 width() ("#co-logo img").css('height') 和 $("#co-logo img").css('width'))

使用 jQuery 的 javascript 添加内联样式:简化:

$("#co-logo img").css({'margin-top': -($("#co-logo img").height() / 2) + "px", 'margin-left': -($("#co-logo img").width() / 2) + "px"});

解释:

//get the image size:
var theHeight = $("#co-logo img").height();
var theWidth = $("#co-logo img").width();

//place them into the image styles:
$("#co-logo img").css({'margin-top': -theHeight / 2 + "px", 'margin-left': -theWidth / 2 + "px"});

编辑 2:

使用 each 在每个图像之间循环。

假设每个 block 都有相同的 ID，则需要将其与类交换，例如 .co-logo 而不是 #co-logo(因为 ID是唯一的)，像这样调用每个:

$(".co-logo").each(function(){
    $("img", $(this)).css({'margin-top': -($("img", $(this)).height() / 2) + "px", 'margin-left': -($("img", $(this)).width() / 2) + "px"});
});

这样就可以了!