相关疑难解决方法(0)

在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
}
Run Code Online (Sandbox Code Playgroud)
<!--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>
Run Code Online (Sandbox Code Playgroud)

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

html css

359
推荐指数
9
解决办法
73万
查看次数

将一个未知大小的大图像置于较小的div内,并隐藏溢出

我想在没有javascript没有背景图像的div中居中一个img .

这是一些示例代码

<div> 
    <img src="/happy_cat.png"/> 
</div>
Run Code Online (Sandbox Code Playgroud)
  • 我不知道img的大小,它应该能够超过父级的宽度
  • 我不知道父div的宽度(它是100%)
  • 父div具有固定的高度
  • 图像大于父图像,父图像溢出:隐藏
  • 只需要支持现代浏览器

期望的结果.(忽略不透明等,只需注意定位).

在此输入图像描述

我知道这可以通过背景图像轻松完成,但这对我来说不是一个选择.我也可以使用javascript,但它似乎是一个非常沉重的方式来实现这一点.

谢谢!

插口

html css css3

72
推荐指数
2
解决办法
6万
查看次数

标签 统计

css ×2

html ×2

css3 ×1