如何在我的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在每张图片之间循环。

假设每个块都有相同的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"});
});

那就行了！

Answer 2

#co-logo  {
    width: 180px;
    height: 180px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    margin: 20px 0 20px 20px;
    background-color: White;
    border: 1px solid #d6d5d5;
}

如果您要div float:left使用另一个div

，请不要对此div使用向左浮动