=====

Question

如何将图像置于空白处？

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

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

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

仅使图像消失。

Answer 1

<img>不是块级标记（其内联级别标记）。所以你在css中有两个选择。一个是使用：display:inline-block，然后提供margin : 0 auto，这是在一行中添加多个图片时使用的。

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

我希望这可以提供帮助。

Answer 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宽度元素的中间

2）左：50％;您告诉浏览器将元素的左侧边距准确定位在元素父级的中间

当然，当你将元素的中间位于元素父元素的中间时，你已经成功地将元素水平居中。

如果您正在为当代浏览器设计样式，则可以使用 CSS3 中的灵活框布局模块：

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

Answer 3

第一种方式

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

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

这应该以你的html对象为中心。

有时这对我不起作用，所以我使用弃用的标记<center>。

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

Answer 4

＆LT; div style =“margin：0 auto”＆gt; ....图片... ＆LT; / div＆gt;

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