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>

///我尝试了在div标签类名“ output-container”中水平对齐的img标签id“ output-img”居中对齐。 这是我的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中可以正常工作，并且我包含了标准的bootstrap 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;。文本对齐实际上是用于（您猜对了）文本。 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>

---