html - img 标签在 div 标签水平居中对齐

Question

<section class="bg-light ">
        <div class="output-container ">
            <img id="output-img " src="img/styles/cry.jpg " height=256></img>
        </div>
</section>

//我试过 img 标签 id "output-img"在 div 标签类名 "output-container"中水平居中对齐。 这是我的 CSS 代码。

.output-container{
    text-align: center;
}
#outputImg{
    display:block;
    margin-left: auto;
    margin-right: auto;

}

我在#outputImg 中删除了 display: block ，但也没有用。 我在 stackoverflow 中应用了一些代码，但它也没有用。

Answer 1

我在这方面可能是错误的，但据我所知，id 的名称在 css 和 html 中必须相同。

<img id="output-img">

在 css 中也保持相同的语法......

#output-img {
  code stuff here
}

这不是“output-img”和“outputImg”。

希望这是有道理的。