在div中将图像水平居中 [英] Center image horizontally within a div

问题描述

这可能是一个愚蠢的问题，但是由于居中对齐图像的常规方法不起作用，所以我想问一下.如何在容器div内居中对齐(水平)图像?

This is probably a stupid question but since the usual ways of center aligning an image are not working I thought I would ask. How can I center align (horizontally) an image inside its container div?

这是HTML和CSS.我还为缩略图的其他元素添加了CSS.它按降序运行，因此最高的元素是所有内容的容器，最低的元素是所有内容的内部.

Here's the HTML and CSS. I've also included the CSS for the other elements of the thumbnail. It runs in descending order so the highest element is the container of everything and the lowest is inside everything.

#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中居中.容器已隐藏溢出，因此我想查看图像的中心，因为通常这是焦点所在.

Okay, I have added the markup without the PHP in so should be easier to see. Neither solution seems to work in practice. The text at top and bottom cannot be centered and the image should be centered within its container div. The container has overflow hidden so I want to see the center of the image as that's normally where the focus is.

推荐答案

因此，也许翻译一下:

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

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

Here's my solution in: http://jsfiddle.net/marvo/3k3CC/2/

这篇关于在div中将图像水平居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！