Fatal编程技术网
  • html/
  • Html 为什么不是'；我的图像不是在div中居中吗？

Html 为什么不是'；我的图像不是在div中居中吗？

html css

Html 为什么不是'；我的图像不是在div中居中吗？,html,css,Html,Css,有人能告诉我为什么这不起作用吗？我试着把图像居中 CSS .img-center { display: block; margin-left: auto; margin-right: auto; } HTML <div class="container"> <section id="whats-on"> <h1>News</h1> <div class="img-center"> <a

有人能告诉我为什么这不起作用吗？我试着把图像居中

CSS

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

<div class="container">
  <section id="whats-on">
    <h1>News</h1>
    <div class="img-center">
      <a href="#"><img src="assets/img/my-image.png"></a>
    </div>
  </section>
</div><!-- container -->


新闻
img center容器的宽度为100%（默认情况下），因此它已经居中，但覆盖了所有视口的宽度。这是因为
div
是
块
元素，正如文档所述

块级元素始终从新行开始，并占据可用的全部宽度（尽可能向左和向右延伸）。
元素是块级元素

因此，您可以删除
显示：块

选项A.添加
文本对齐：居中
到
.img容器

对于此选项，可以删除所有其他样式



.img中心{
文本对齐：居中；
}



新闻

这与您的
没有设置宽度有关。
增加
宽度：100px只是为了看看


请参见：
您的代码将图像的容器居中（该容器已经是全宽的，也就是说它什么也不做），而不是图像本身在该容器中。只要这样做：


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



只需添加
文本对齐：居中
to.img center
这是因为
img center
div是页面宽度的100%。试着在上面设置一个
宽度
。太棒了！！工作很愉快。。谢谢你的帮助：）@KOB很高兴我能帮忙I’我不会忘记给我的答案打分。谢谢