Центрирование изображения с различной шириной шире родительского контейнера

Question

Я пытаюсь создать блог со средним столбцом текста, с изображениями, также центрированными на странице. Мне нужен текст шириной 600 пикселей, но изображения могут быть шириной до 1024 пикселей, и я бы хотел, чтобы они были сосредоточены на странице.

Мой странно ограничение в том, что я использую платформу Shopify и мой код получает генерируется, как это (т.е. IMG находится внутри тега ар)

<div class="container"> 
    <p>Hello 123, this is a blog post..</p> 
    <p><img src="//cdn.shopify.com/s/files/1/0296/9253/files/IMG_6009_1024x1024.JPG?14454" /></p> 
    <p>This is also some text</p> 
    </div> 

Так как я пишу код, который позволяет мои образы повесить вне p-тегов, когда я не знаю ширины изображений? Я мог бы написать решение jQuery, но в идеале я бы написал решение для CSS ...

Спасибо!

Answer 1

Есть много способов до центра элементов:

Margin путь:

С шириной набора или дисплей: встроенный блок; Вы можете использовать:

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

выравнивания текста путь:

С шириной набора или дисплей: встроенный блок; Вы можете добавить это к родителю:

text-align: center; 

Абсолютный путь:

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

или

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

Также не слишком беспокоиться о IE7 и ниже, как большинство людей, используйте более высокие версии, т. е. или другой браузер, хотя это должно работать до тех пор, пока не будет достигнуто значение ie6

Также, если вы просто хотите его поместить в HTML вы можете добавить это к родительскому изображению:

align='center'