javascript - How to center the img element in a div, as shown in the example below

Question

Html code {code...} Example of the desired effect. The red area is div, and the green area is img. That is to say, img is wider. The width of img is not fixed, so it cannot be solved by fixing margin-left.

黄舟 · Answer

There is a way, but instead of using img tag, add background-image to p.

p {
    background-image: url(image-url);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

仅有的幸福 · Answer

Positioning picture marginleft:-(width/2) As for the width of img is not fixed, it can be obtained by js and then dynamically set marginleft

天蓬老师 · Answer

Wrap another layer.

#wrapper{
    position: relative;
    width: 200px;
    height: 200px;
}
#wrapper2{
    position: absolute;
    left: 50%;
}
img{
    margin-left: -50%;
}

wrapper2的宽度是img宽度。img的margin-left就等于自身宽的一半，相当于left:-50%*width

PHP中文网 · Answer

img is an inline-block element and can be directly text-aligned at the parent level: center;

怪我咯 · Answer

In fact, we want to achieve the effect of horizontal centering. Here are four methods to achieve horizontal centering (Note: In each example below, the alignment operation of the child element is implemented, and the parent container of the child element is the parent element)

Use inline-block and text-align to implement

.parent{
    text-align: center;
}
.child{
    display: inline-block;
}

Advantages: good compatibility;

Disadvantages: need to set child elements and parent elements at the same time

Use margin:0 auto to achieve

.child{
    width:200px;
    margin:0 auto;
}

Advantages: Good compatibility

Disadvantages: Need to specify the width

Use table to implement

.child{
    display:table;
    margin:0 auto;
}

Advantages: You only need to set up yourself

Disadvantages: IE6 and 7 need to adjust the structure

Using absolute positioning

.parent{
    position:relative;
}
.child{
    position:absolute;
    left:50%;
    transform:translate(-50%);
}

Disadvantages: poor compatibility, available for IE9 and above

Practical flex layout implementation

The first method

.parent{
    display:flex;    
    justify-content:center;
}

The second method

.parent{
    display:flex;
}
.child{
    margin:0 auto;
}

Disadvantages: poor compatibility, if large-area layout is carried out, efficiency may be affected

过去多啦不再A梦 · Answer

Wrap p outside. When img.onload, js calculates the width and assigns it to the outer layer. Center the outer content

PHP中文网 · Answer

First give p a position:relative;
and then give img a {

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

}
If it is not compatible with c3, you can give img{

position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;

}

仅有的幸福 · Answer

1

img{
    display: block;
    margin: 0 auto;
}

2

p{
    text-align: center;
    
    img{
         display: inline-block;
    }
}

3

p{
    position: relative;
    
    img{
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -(图片高度/2) 0 0 -(图片宽度/2)
    }
}

4 用flex

淡淡烟草味 · Answer

One layer of p on the outside, and one layer of p on the inside to limit the size of the picture

巴扎黑 · Answer

You can take a look if you don’t consider compatibility issues object-fit

Html code

Example picture of desired effect

13 answers

In fact, we want to achieve the effect of horizontal centering. Here are four methods to achieve horizontal centering (Note: In each example below, the alignment operation of the child element is implemented, and the parent container of the child element is the parent element)

Use inline-block and text-align to achieve

Use margin:0 auto to implement

Use table implementation

Use absolute positioning to implement

Practical flex layout implementation

the first method

The second method

In fact, we want to achieve the effect of horizontal centering. Here are four methods to achieve horizontal centering (Note: In each example below, the alignment operation of the child element is implemented, and the parent container of the child element is the parent element)

Use inline-block and text-align to implement

Use margin:0 auto to achieve

Use table to implement

Using absolute positioning

Practical flex layout implementation

The first method

The second method