在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中居中.容器已隐藏溢出,因此我希望看到图像的中心,因为它通常是焦点所在的位置.

Answer 1

CSS Guy建议如下:

所以,翻译,或许:

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

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

Answer 2

CSS flexbox可以justify-content: center在图像父元素上完成.

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>

Answer 3

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

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

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

Answer 4

这也可以做到

#imagewrapper {
    text-align:center
}

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

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代码对所有标记进行多项更改.

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>

这会将图像高度限制为600px,并且将父级容器水平居中(或者在父级宽度较小时向下调整大小),从而保持比例.

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/

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>

Answer 9

将此添加到您的 CSS：

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

只是引用一个子元素，在这种情况下是图像。