【问题标题】：How can I center my image in white space?我怎样才能使我的图像在空白处居中？
【发布时间】：2014-11-28 19:48:41
【问题描述】：

如何让我的图像在空白区域居中？

我正在使用 HTML、PHP 或 CSS。我不确定最好的方法，但这就是我迄今为止所涉及的。

我只在w3schools.com 上看到了如何在文本中对齐图像。我的其他尝试，如：

#image {
    margin-left: auto;
    margin-right: auto;
}

只让图片消失。

【问题讨论】：

对或错，我使用带有 text-align: center; 的 div 标签在 CSS 中。当然可能有更好的方法。我对答案很感兴趣。我想做一些不同的事情。但这可能会让你暂时过关。
@SathiyaKumar 明白了。不确定。我确实阅读了这个论坛的规则，但我不知道这是否是一个可以接受的问题。现在我知道了。谢谢！
你确定图片的父容器有一个宽度，你需要在你的图片上指定display : block。 fiddle
PHP 可能在这方面发挥的作用很小——它是一种生成发送到客户端的 HTML 的服务器端语言，因此您只需要关心标记 (HTML) 和样式（CSS）。此外，使用 W3Schools 时的必填链接和注意事项：w3fools.com
我选择了@closetnoc 解决方案。也许不漂亮，但我得到了我想要的结果。

【解决方案1】：

<img> 不是块级标记（它的内联级标记）。所以你在 css 中有两个选择。一种是使用：display:inline-block，然后给出margin : 0 auto，当您在一行中添加多个图像时使用。

第二个是对margin 做同样的事情，但这次使用display:block;；

我希望这能有所帮助。

【讨论】：

你能举一个使用display:inline-block和margin : 0 auto的例子吗？
@w3d ：对于 HTML ：<img src="1.jpg"><img src="2.jpg"> 对于 CSS ：img {width:200px;height:200px; display:inline-block; margin:0 auto; } 这会产生两个 200X200 图像，正好是页面的中心（水平）。关于上面的代码你应该知道的是：如果图像加在一起超过了整个页面的宽度，它们就不会并排！这就是为什么我使用 width:200px;height:200px;举个例子。

【解决方案2】：

在 CSS 中水平居中图像（或任何元素）的标准方法是：

img {margin:0 auto;)

这是以下内容的简短版本：

img (margin:0 auto 0 auto;}

这又是以下的简写：

img {margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;}

=====

如果上面的标准方法不起作用（可能是因为样式表中其他地方的 CSS 冲突？），如果您知道元素的宽度，还有另一种方法可以在 CSS 中水平居中图像（或任何元素）。

假设<img>的宽度为100px：

img {position:relative; left:50%; margin-left:-50px;}

之所以有效，是因为：

1) 使用margin-left:-50px;，您是在告诉浏览器将元素的左侧边距视为正好在 100px-width 元素的中间

2) 左：50%；您是在告诉浏览器将元素的左侧边距准确地定位在元素父级的中间

当然，当您将元素的中间放置在元素父元素的中间时，您就成功地使元素水平居中了。

如果您正在为现代浏览器设计样式，则可以使用 CSS3 中的 Flexible Box Layout 模块：

img {display:flex; justify-content:center;}

【讨论】：

【解决方案3】：

第一种方式

在两个网站上将边距设置为 50%

#image {
   margin-left: 50%;
   margin-right: 50%;
}

这应该使您的 html 对象居中。

有时这对我不起作用，所以我使用不推荐使用的标签<center>。

<center>
   <img src="/img.png" alt="blubb">
</center>

【讨论】：

center 标签已被弃用...而且 OP 的 margin : 0 auto; 应该足以居中
“有时这个 [将边距设置为 50%] 不起作用” - 它不适用于内联图像（默认值），需要将它们设置为 block。并且真的不应该鼓励使用<center> 标签！（至少 text-align:center 会将其保留在 CSS 中。）

【解决方案4】：

....图片...

如果你想要它在页面的中心添加宽度：100%