【问题标题】:Trying to center an image via CSS尝试通过 CSS 使图像居中
【发布时间】:2023-03-16 18:41:01
【问题描述】:

我正在尝试通过将其置于页面中心来使此图像居中,但它似乎总是更偏向左侧。

我遗漏了哪一部分或者我应该删掉哪一部分?谢谢

这是我的代码:

<body>
<div id="container">
    <div id="thumbnail"><img src="tilden regional park.jpg" /></div>
    <div id="heading">Tilden Regional Park</div>
</body>

这是我的 CSS:

    body {
      font-family:  Open Sans, Arial, Verdana;
      margin: 100px 100px 100px 100px;
      text-align: center;
    }

    #container {
      width:960px;
      margin-left: auto;
      margin-right: auto;
      padding: 30px 0px;
    }

    #thumbnail {
      height: 500px;
      width: 500px;
    }

    #thumbnail img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      height: 100%;
      width: 100%;
    }

【问题讨论】:

  • 为什么不用它作为背景图片?

标签: html css image center margin


【解决方案1】:
<div id="container">
    <div id="thumbnail"><img src="https://www.google.co.uk/images/srpr/logo11w.png" /></div>
    <div id="heading">Tilden Regional Park</div>
</div>

唯一需要的样式是:

#thumbnail {
    height: 500px;
    width: 500px;
    margin: 0 auto;
}
#thumbnail img {
   height: 100%;
   width: 100%;
}

您需要为要居中的元素添加auto 边距,这将是#thumbnail 而不是图像本身,因为图像具有 100% 的宽度和高度。

http://jsfiddle.net/F3337/

【讨论】:

    【解决方案2】:

    从#container 中删除边距并将margin: 0 auto 添加到#thumbnail。也不需要body上的margin声明。

    通过为 div 分配颜色,调试更容易。

    【讨论】:

      【解决方案3】:

      您错过了将“margin: 0 auto”添加到 id 缩略图,而不是 img !所以:

      #thumbnail {
         height: 500px;
         width: 500px;
         margin: 0 auto;
      }
      
      #thumbnail img {
         display: block;
         height: 100%;
         width: 100%;
      }
      

      【讨论】:

      • 你的答案和我的不一样吗?
      • 对不起,你的速度更快 :)
      猜你喜欢
      • 2014-07-06
      • 2016-04-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-30
      • 2012-03-01
      • 1970-01-01
      • 1970-01-01
      • 2017-06-17
      相关资源
      最近更新 更多