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 tag id "output-img" center 在div tag class name "output-container" 中水平对齐。 这是我的 CSS 代码。

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

}

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

Answer 1

我可能错了，但据我所知，css和html中id的名称必须相同。

<img id="output-img">

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

#output-img {
  code stuff here
}

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

希望这有某种意义。

Answer 2

它在 Chrome 中工作，我包含了标准的引导 css 文件，所以我不认为您包含的代码是您的问题。

这里有一些错别字：

• 您应该在height 属性的值周围加上引号
• img 标签不使用结束标签
• #output-img css 规则应该与 id 匹配。

如果使用有效代码不起作用，请尝试将图像的display 属性设置为table。

.output-container {
  text-align: center;
}

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="bg-light ">
  <div class="output-container ">
    <img id="output-img " src="https://via.placeholder.com/256" height="256">
  </div>
</section>

Answer 3

删除 text-align:center; 并将其替换为 place-items:end center;。 Text-align 实际上是用于（你猜对了）文本。 place-items 用于在它们各自的容器内对齐（或放置）非文本项。使用place-items: end center; 将项目（在本例中为图像）从末端定位到中心，并防止它卡在容器的开头（或左侧）。

CSS 更改：

.output-container{
    place-items: end center;
}

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

HTML 更改包括删除结束 </img> 标记和值 " " 中的（所有）额外空格。 （其他答案中都提到了这两项。）

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

---

附加：

---

我添加了一个示例图像用于演示目的。这适用于我的（Chrome）浏览器，再次测试。如果它仍然无法正常工作 - 这可能是浏览器问题。 CSS 很常见，我认为所有浏览器都能识别它，但并非所有浏览器都使用最新版本的 CSS。从逻辑上讲，这可能是问题所在。

.output-container{
    margin: 0;
    padding: 10px;
    place-items: end center;
    border: 1px solid #CCC;
}

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

<section class="bg-light">
        <div class="output-container">
            <img id="output-img" src="https://i.stack.imgur.com/gYMbc.gif" height="100%">
        </div>
</section>

---