Html 如何在div内水平和垂直居中放置图像？

图像大小都不一样。我正在使用一些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%;

}

---

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

为使中心符合您的要求，我建议以下解决方案：

由于您已经在使用jQuery来处理图像的大小，因此可以通过编程方式添加它们的

页边顶部

和

页边左侧

（各添加一半）

编辑：

（我不知道您是如何放置图像大小的，您可能需要将

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：

使用

每个

在每个图像之间循环

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

那就行了

#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

使用float-Left，请在

div
之外使用另一个div，该div可能重复使用jQuery如何执行此操作？它会获取第一个图像的大小，然后将该值用作所有其他图像的基础。我是否需要在函数中的某个位置合并each（）。@TCC yes。我不知道你在同一页上有图像，在这种情况下使用
每个
，不要忘记如果你重复
#co logo
，你应该用一个类替换ID，因为ID是唯一的。你能解释一下在这个例子中如何使用each（）吗？@TCC刚刚更新了这个问题，这将为你指明正确的方向。。。