javascript - 使 CSS 通用图像居中

Question

下面是我的CSS。它用于使图像居中。（此代码有效）

.imagecentre{
    width: 25px;
    position:relative;
    margin:0 auto;

}

为了让它工作，你需要说明宽度。但是，并非我所有的图像都是 25 像素。

如何使这个 css 足够通用以容纳所有使用 javascript 的图像？

Answer 1

如果你只想让一个容器中的图像居中，你可以text-align: center在容器上设置，不管你在图像上有什么样式：

<div style="width: 100%; border: 1px solid black; text-align: center">
    <img src="https://www.google.com/logos/2012/vets_day-12-hp.jpg">
</div>​

Answer 2

您可以使用以下结构：

.image-wrapper {
    display: block;
    text-align: center;
}

.image-wrapper > img {
    display: inline;
}

Answer 3

您可以使用margin: 0px auto, 仅当元素是块元素（div、p、h1 等）而不是内联元素（例如图像和 span 是内联元素）时，您需要添加 text-align:center; 到内联元素的父元素..)

如果在 div 中有不止一张图片..

 img.imagecentre{
        width: 25px;
        display:block;
        float:left;
        margin: 0 10px 0 0; /* change the 10 to the space you want.. */

    }

如果是一张图片...（div_warp = 图片的父 div，imagecentre = img 元素）..

#div_warp {
text-align center;
...
...
}

 .imagecentre{
        width: 25px;   
    }

Answer 4

在 jquery 中将 widht 动态设置为".imagecentre"class

$(function(){
    $(".imagecentre").css("width", $(this).width());
});

希望这会有所帮助！