html 在div中将图像水平居中

问题描述：

这可能是一个愚蠢的问题，但是由于居中对齐图像的常规方法不起作用，所以我想问一下。如何在容器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中居中。容器已隐藏了溢出的内容，因此我想查看图像的中心，因为通常这是焦点所在。

这旨在对每周出现一次或两次的所有类似问题（但过于具体的问题，不能成为接近的目标候选人）提供规范的问答。我正在开发一个应用程序，该应用 ...