如何在一个 div 元素中水平居中图片？

Question

如何使图像在其容器div内水平居中对齐？

以下是HTML和CSS。我还包括缩略图的其他元素的CSS。 它按降序运行，因此最高的元素是所有内容的容器，最低的元素在所有内容内部。

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}

<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

好的，我已经添加了没有PHP的标记，因此应该更容易看到。这两种解决方案在实践中似乎都不起作用。顶部和底部的文本无法居中，图像应该位于其容器div中心。容器具有溢出隐藏，因此我希望看到图像的中心，因为那通常是焦点所在的地方。

- Jacob Windsor

---

图片是否应该显示在第一个链接（即artisturl）的同一行上？ - Shoaib

如果没有修改它们的display属性，那么img标签会受到text-align:center的影响。 - Jared Farrish

这是一个简单的CSS样式代码，使文本居中显示。 - Zoltan Toth

Jacob，请至少发布浏览器实际看到的标记，而不是加入PHP的模板？此外，一个可用的http://jsfiddle.net总是有帮助的。 - Jared Farrish

没关系，不要在意我的评论 - 我没有注意到 img 是包含在 a 中的。我太蠢了。 - Shoaib

Answer 1

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

这是我的解决方案：http://jsfiddle.net/marvo/3k3CC/2/

- Marvo

---

我不认为这是个好主意，而且我相信还有一些注意事项，比如margin: auto依赖于包含元素具有指定的宽度值。 - Jared Farrish

我仍在提高我的CSS技能，感谢这个有趣的学习点。但在这种情况下，他在容器上使用了固定宽度。 - Marvo

在这个上下文中，“指定宽度”究竟是什么意思？这似乎是有用的知识。 - Shoaib

看看我做的这个 fiddle，我不确定该怎么想。你所建议的并没有什么作用，而且我认为 img 需要定义一个宽度才能在 auto 的情况下产生任何效果。 - Jared Farrish

你并没有真正实现我提出的解决方案。其次，包含图片的DIV的宽度为120像素，与图像的宽度几乎相同，这使得很难确定它是否实际居中了图像。这是我的解决方案：http://jsfiddle.net/marvo/3k3CC/2/ - Marvo

Answer 2

CSS Flexbox可以在图片的父元素中使用justify-content: center来实现居中对齐。为了保持图像的纵横比，需要为它添加align-self: flex-start;属性。

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

输出：

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
.image-3 {
  width: 300px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

- m4n0

---

当浏览器支持时，这是一个极好的解决方案，而我的浏览器也支持。还可以使用align-items来实现垂直居中。各种边距的解决方案对我无效，因为要居中的元素没有宽度和高度属性。 - Marc Rochkind

在我的情况下，div 元素具有给定的大小（例如 50px），这将拉伸图像以适应 50px。 - Max

@Max 在这种情况下，您可以将 align-self 应用于图像元素，就像这样 https://jsfiddle.net/3fgvkurd/ - m4n0

Answer 3

我刚在W3 CSS页面上找到了下面这个解决方案，它解决了我的问题。

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

来源： http://www.w3.org/Style/Examples/007/center.en.html

- mk.hd

---

我正在使用 max-width: 100%; max-height: 100%; 来调整图像大小，如果屏幕比图像小，但在这种情况下它不居中。有什么建议可以让它居中并应用这两个属性？ - Mando

Answer 4

这也可以做到。

#imagewrapper {
    text-align:center;
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px;
}

- Mehmet Yaden

---

你是不是想说 text-align:center; 和 margin:0 5px;？我加了一个分号。 - jagb

@jagb 在选择器块中，最后一个属性不需要分号。 - TylerH

@TylerH 说得对，分号在选择器块的最后一个属性不是必须的，但使用分号通常更加安全。如果我写了一个 CSS 文件，并且另一个开发人员稍后编辑了我的文件，并在缺少分号的那一行后面添加了一些代码，他们的高度、宽度或其他声明可能会出现问题（更糟糕的是，他们可能没有注意到这个问题）。因此，我会建议保留分号。这就是为什么我会使用分号并始终保留分号的原因。 - jagb

@jagb 如果其他开发者稍后编辑您的文件，则他们会在必要时添加分号，否则编写错误代码就是他们的问题。对于您最初的评论，仍然回答：“CSS中最后一行的分号是一种风格选择”。 - TylerH

我同意jagb的观点。这个网站应该推广良好的编码风格选择。良好的编码风格不会留下容易出错的代码。在每一行上放置分号可能只会花费你1/10秒的时间，但是为了找到一个缺失的分号而进行调试可能会花费你数小时的时间。这就是为什么大型科技公司坚持这样做的原因：Google HTML/CSS Style Guide - Declaration Stops。 - Georg Patscheider

Answer 5

我发现（在所有浏览器中似乎都有效）水平居中一个图片或任何元素最好的方法是创建一个CSS类，并包含以下参数：

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

你可以按照以下方式将你创建的CSS类应用到标签上： HTML

<img class="center" src="image.jpg" />

你也可以通过以下方式在元素中内联CSS：

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

...但我不建议使用内联CSS编写样式，因为如果您想要更改样式，那么您就必须对所有标记进行多次更改来使用您的居中CSS代码。

- Kevin

---

完成了任务，但为了浏览器兼容性，您需要使用其他形式的转换。 - Jay Smoke

我还发现这个链接很有帮助。它展示了一个类似于你在这里展示的transform: translate(-50%)技巧，但是与left:50%不同的是，它将其与margin-left: 50%结合使用。它还对当项目具有相对定位和绝对定位时的解决方案进行了对比。这主要是为了我的未来参考，这样我就可以在一个（点赞）位置引用你的答案和我之前使用的解决方案。 :-) https://css-tricks.com/centering-css-complete-guide/ - SherylHohman

哦，这里有另一个关于元素和容器定位的小贴士，关于使用 transform: translate 技巧的 w3.org。基本规则如下： 1）将容器设置为相对定位，这样声明它是绝对定位元素的容器。 2）将元素本身设置为绝对定位。 3）使用 'top: 50%'（或使用 left:50% 水平居中）将其放置在容器的中心位置。 4）使用 translation 将元素向上移动半个自身高度（或水平移动半个自身宽度）。 - SherylHohman

Answer 6

这就是我最终所做的：

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

这会将图像高度限制为600像素，并使其在父容器中水平居中（或在父容器宽度较小的情况下缩小），保持比例。

- Cherno

Answer 7

我冒昧猜测以下内容或许是你需要的。

注意，我认为下面这部分在问题中被意外省略了（见评论）：

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

所以您需要的是：

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

- Jared Farrish

---

嗯...我敢打赌它可以工作。我在我的解决方案中居中了图像，但我可以理解如何将问题解释为将包含图像的div居中于另一个div中。无论哪种方式，解决方案都是相同的。 - Marvo

实际上，两种解决方案都没有奏效。我之前尝试过这两种方法，但它们都无法正常工作。请参考问题中的编辑。 - Jacob Windsor

Answer 8

是的，像这样的代码工作正常。

<div>
 <img/>
</div>

但是只是提醒您，图片的样式

object-fit : *depend on u*

因此，最终的代码将类似于以下示例：

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

div img {
  object-fit: contain;
}

<div style="border: 1px solid red;">
  <img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;" />
</div>

- Mark Sparrow

Answer 9

将以下内容添加到你的CSS中:

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

只是引用子元素，这种情况下是图片。

- karlzafiris

---

这很有用，当你仍然想要访问顶部边距时。比将边距设置为0自动更好。 - tallgirltaadaa

Answer 10

左右各添加相同的像素内边距：

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

- V-SHY