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

Question

Html code

<style>
    p {
        overflow: hidden ;
    }
    img {
        height: 100% ;
        width: auto ;
    }
</style>

<p>
    <img src='//foo.com/foo.jpg' />
</p>

Example picture of desired effect

The red area is p, the green area is img

In other words, img is wider

The width of img is not fixed, so you cannot use fixed margin-left to solve it

• Question on April 20
• 2 Comment
• Invite to answer
• edit
• More
  • report
  • closure

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List .
At the same time, the users you @ will also receive notifications

Default sort Time sorting

13 answers

The answer is helpful and has reference value 3 The answer is not helpful, it is the wrong answer, and it does not answer the question

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

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

• Answered on April 20
• Comment
• edit

Mr. Xiang227 Reputation

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List.
At the same time, the users you @ will also receive notifications

The answer is helpful and has reference value 1 The answer is not helpful, it is the wrong answer, and it does not answer the question

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

• Answered on April 20
• Comment
• edit

Look at the world with a cold eye177 Reputation

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List .
At the same time, the users you @ will also receive notifications

The answer is helpful and has reference value 1 The answer is not helpful, it is the wrong answer, and it does not answer the question

Wrap another layer.

<p id="wrapper">
    <p id="wrapper2">
        <img src="demo_img3.jpg" alt="" />
    </p>
</p>

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

The width of

wrapper2 is the img width. The margin-left of img is equal to half of its own width, which is equivalent to left:-50%*width

• Answered on April 20 · Updated on April 20
• 2 Comment
• edit

toBeTheLight4.9k Reputation

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List .
At the same time, the users you @ will also receive notifications

The answer is helpful and has reference value 1 The answer is not helpful, it is the wrong answer, and it does not answer the question

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

• Answered on May 3
• Comment
• edit

hugangqiang117 Reputation

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List.
At the same time, the users you @ will also receive notifications

The answer is helpful and has reference value 1 The answer is not helpful, it is the wrong answer, and it does not answer the question

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

.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 implement

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

Advantages: good compatibility

Disadvantages: need to specify the width

Use table implementation

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

Advantages: You only need to set yourself

Disadvantages: IE6 and 7 need to adjust the structure

Use absolute positioning to implement

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

Shortcomings: 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 a large area is laid out, efficiency may be affected

• Answered on May 5
• Comment
• edit

yogi27 Reputation

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List.
At the same time, the users you @ will also receive notifications

The answer is helpful and has reference value 0 The answer is not helpful, it is the wrong answer, and it does not answer the question

P is wrapped outside. When img.onload, js calculates the width and assigns it to the outer layer. Center the outer content

• Answered on April 21
• Comment
• edit

Jessica_loli16 Reputation

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List .
At the same time, the users you @ will also receive notifications

The answer is helpful and has reference value 0 The answer is not helpful, it is the wrong answer, and it does not answer the question

First give p a position:relative;
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;

}

• Answered on April 21
• Comment
• edit

clownzoo11 Reputation

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List .
At the same time, the users you @ will also receive notifications

The answer is helpful and has reference value 0 The answer is not helpful, it is the wrong answer, and it does not answer the question

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 Use flex

• Answered on April 21 · Updated on April 21
• Comment
• edit

Lone Wolf in the Wind227 Reputation

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List .
At the same time, the users you @ will also receive notifications

The answer is helpful and has reference value 0 The answer is not helpful, it is the wrong answer, and it does not answer the question

There is a layer of p on the outside and a layer of p on the inside to limit the size of the picture

• Answered on May 3
• Comment
• edit

Fujinishi22 Reputation

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List.
At the same time, the users you @ will also receive notifications

The answer is helpful and has reference value 0 The answer is not helpful, it is the wrong answer, and it does not answer the question

If you don’t consider compatibility issues, you can take a look object-fit

• Answered on May 3
• Comment
• edit

CRIMX865 Reputation

submit comments

× Comments support some Markdown syntax: **bold**_italic_[link](http://example.com)> Quote`code`- List .
At the same time, the users you @ will also receive notifications

The answer is helpful and has reference value 0 The answer is not helpful, it is the wrong answer, and it does not answer the question

给我你的怀抱2713 days ago1709

Answer 1

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 2

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 3

Wrap another layer.

<p id="wrapper">
    <p id="wrapper2">
        <img src="demo_img3.jpg" alt="" />
    </p>
</p>

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

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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 8

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 9

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

Answer 10

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