简单地改变父对齐:)

在父属性上试试这个:

text-align:center

用CSS将图像居中。

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

你可以在这里了解更多

你可以:

<中心> < img src = "…"/ > < /中心>

这将不起作用，因为text-align属性适用于块容器，而不是内联元素，而img是一个内联元素。请参阅W3C规范。

用这个代替:

img。中心{ 显示:块; 保证金:0自动; ｝ < span style=" font - family:宋体;"> <img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"> < / div >

我发现，如果我在一个div中有一个图像和一些文本，那么我可以使用text-align:center一次性对齐文本和图像。

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

我找到的最简单的解决方案是添加到我的img-element:

style="display:block;margin:auto;"

看来我不需要像别人建议的那样在auto前面加0。也许这是正确的方法，但对于我的目的来说，没有“0”也足够了。至少在最新的Firefox、Chrome和Edge上是这样。