我怎么能居中对齐(水平)一个图像内的容器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中居中。容器有溢出隐藏,所以我想看到图像的中心,因为这通常是焦点所在。


当前回答

使用下面的css命令将图像居中。你必须在图像一开始就给出宽度。

img{
  width: 300px;
  position: fixed;
  left0;
  right:0;

}

其他回答

在div中居中一个图像

/* standar */ div, .flexbox-div { position: relative; width: 100%; height: 100px; margin: 10px; background-color: grey; } img { border: 3px solid red; width: 75px; height: 75px; } /* || standar */ /* transform */ .transform { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ } /* || transform */ /* flexbox margin */ .flexbox-div { display: -webkit-flex; display: flex; background-color: lightgrey; } .margin-img { margin: auto; } /* || flexbox margin */ /* flexbox justify align */ .flexbox-justify { justify-content: center; } .align-item { align-self: center; } /* || flexbox justify align */ <h4>Using transform </h4> <div> <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" /> </div> <h4>Using flexbox margin</h4> <div class="flexbox-div"> <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" /> </div> <h4>Using flexbox justify align</h4> <div class="flexbox-div flexbox-justify"> <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" /> </div>

Style.css

img#center-img{

 display: block;
 margin: auto;
}

Html

<html>
  <body>
    <div>
      <img src='pic.png' id='center-img'>
    </div>
  </body>
</html>

使用定位。下面的方法对我很有效……(水平和垂直居中)

缩放到图像的中心(图像填充div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

没有缩放到图像的中心(图像不填充div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

是的,这样的代码可以正常工作

<div>
 <img/>
</div>

提醒大家一下,图像的样式

object-fit : *depend on u*

所以最终的代码就像例子一样

div { 显示:flex; justify-content:中心; 对齐项目:中心; } Div img { object-fit:包含; } < span style=" font - family:宋体;"> <img src="https://img.joomcdn.net/9dd32cbfa0cdd7f48ca094972ca47727cd3cd82c_original.jpeg" alt="" srcset="" style=" 这个特性:50%; 高度:7.5快速眼动; 宽度:7.5快速眼动; ”object-fit:包含;/> < / div >

为左右两边设置相同的像素填充:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">