将具有比父容器宽的宽度变化的图像居中答案

【问题标题】：Centering an image with varying width wider than parent container将具有比父容器宽的宽度变化的图像居中
【发布时间】：2014-06-20 19:43:47
【问题描述】：

我正在尝试构建一个带有中间文本列的博客，图像也位于页面中心。我想要 600 像素宽的文本，但图像最大可以是 1024 像素宽，我希望它们在页面上居中。

我奇怪的限制是我使用的是 Shopify 平台并且我的代码是这样生成的（即 img 在 p 标签内）

    <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 解决方案......

谢谢！

【问题讨论】：

标签： html css image shopify centering

【解决方案1】：

有很多方法可以使元素居中：

保证金方式：

具有设定的宽度或显示：inline-block;你可以使用：

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

文本对齐方式：

具有设定的宽度或显示：inline-block;您可以将其添加到父级：

text-align: center;

绝对方式：

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

或

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

也不要太担心 ie7 及以下版本，因为大多数人使用更高版本的 ie 或不同的浏览器，尽管这应该可以工作到 ie6

此外，如果您只想将其放入 HTML 中，您可以将其添加到图像的父级：

align='center'

【讨论】：

谢谢 - 我将 P 标签或 img 标签居中 - 但是如何将 p 标签和 p-with-img 标签居中？ P 应该是 600px 宽，img 最多可以是 1024px 宽。谢谢
@tomcritchlow 只需将 text-align: center 添加到容器 div 中
抱歉 - 我一定遗漏了什么。在这里查看我的尝试：htmlpad.org/fiercelycurious
@tomcritchlow 你的问题是包含图像的 p 的宽度设置为 600px 而不是 1024px 更改它并且它可以工作
但我希望 p 仅包含 600px 宽的文本...我该如何实现？