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

13

0

0

给我你的怀抱

reply

reply all(13)

I'll reply Close

左手右手慢动作2017-05-16 13:23:39 3 floor

Give the parent element a display: table-cell and then set text-align and vertical-align which are more common

Like +0

Add Reply 关闭回复

给我你的怀抱

reply

大家讲道理2017-05-16 13:23:39 2 floor

css:

    .box{
        width: auto;
        height: 100px;
        position: absolute;
    }
    .box img{
        width: 300px;//随便改
        height: 100%;
        background: green;
    }
    .box .inner{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto auto;
    }

---

html:

<p class="box">
    <img src="aaa.png" alt="">
    <p class="inner"></p>
</p>

Like +0

Add Reply 关闭回复

给我你的怀抱

reply

洪涛2017-05-16 13:23:39 1 floor

position + transform

Like +0

Add Reply 关闭回复

给我你的怀抱

reply

Answer 1

Give the parent element a display: table-cell and then set text-align and vertical-align which are more common

Answer 2

css:

    .box{
        width: auto;
        height: 100px;
        position: absolute;
    }
    .box img{
        width: 300px;//随便改
        height: 100%;
        background: green;
    }
    .box .inner{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto auto;
    }

---

html:

<p class="box">
    <img src="aaa.png" alt="">
    <p class="inner"></p>
</p>

Answer 3

position + transform