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

最佳答案

The CSS Guy建议以下内容:

因此,翻译:

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


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

关于html - 在div中将图像水平居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36828125/

10-12 13:00
查看更多