【问题标题】: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 宽的文本...我该如何实现?
    猜你喜欢
    • 1970-01-01
    • 2015-04-10
    • 1970-01-01
    • 1970-01-01
    • 2011-03-19
    • 2017-04-27
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多