html - Centering an image with varying width wider than parent container -

html - Centering an image with varying width wider than parent container -

i'm trying build blog middle column of text, images centered on page. i'd text 600px wide, images can 1024px wide , i'd them centered on page.

my weird constraint i'm using shopify platform , code gets generated (i.e. img within p tag)

<div class="container"> <p>hello 123, blog post..</p> <p><img src="//cdn.shopify.com/s/files/1/0296/9253/files/img_6009_1024x1024.jpg?14454" /></p> <p>this text</p> </div>

so how write code allows images hang outside p tags when don't know images width? write jqeury solution ideally i'd write css solution...

thanks!

there many ways centre elements:

margin way:

with set width or display: inline-block; can use:

margin-left: auto; margin-right: auto;

text-align way:

with set width or display: inline-block; can add together parent:

text-align: center;

absolute way:

position: absolute; left: 50%; margin-left: width/2;

or

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

also don't worry much ie7 , below the bulk of people utilize higher versions of ie or different browser though should work until ie6

also if want set html can add together parent of image:

align='center'

html css image shopify centering