Question

我正在尝试使用中间一列文字构建博客，图片也以页面为中心。我喜欢600px宽的文字，但图片宽度可达1024px，我希望它们能够在页面上居中。

我奇怪的限制是我使用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解决方案......

谢谢！

Answer 1

有许多方法可以集中元素：

保证金方式：

设置宽度或显示：inline-block;你可以使用：

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

text-align方式：

设置宽度或显示：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'

使宽度不同于父容器的图像居中

1 个答案: