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例如是内联元素）时，你需要添加文本 - 居中对齐;到内联元素的父元素..）

如果它不止一张图片进入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中将宽度动态设置为".imagecentre" class

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

希望这会有所帮助!!

使CSS成为图像居中的通用

4 个答案: