javascript - 画像のセンタリングのために CSS をジェネリックにする

Question

以下は私のCSSです。画像を中央に配置するために使用されます。(このコードは動作します)

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

}

機能させるには、幅を指定する必要があります。ただし、すべての画像が 25px というわけではありません。

javascript を使用してすべての画像に対応できるように、この css を汎用的にするにはどうすればよいですか?

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

jqueryで、widhtを動的に".imagecentre"クラスに設定します

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

これがお役に立てば幸いです!!

Answer 3

を使用できるのはmargin: 0px auto、要素がブロック要素 (div、p、h1 など) であり、インライン要素ではない場合 (たとえば、イメージとスパンがインライン要素である場合) のみです。そのため、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.. */

    }

それが 1 つの画像の場合... (div_warp = 画像の親 div、imagecentre = img 要素)。

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

 .imagecentre{
        width: 25px;   
    }

Answer 4

次の構造を使用できます。

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

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