如何在一个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 }  <a href="NotByDesign"> <div id="thumbnailwrapper"> <a href="NotByDesign">  <b>Not By Design</b> <br> <div id="artiststhumbnail"> <a href="NotByDesign">  <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" /> </a> </div> <div id="genre">Punk</div> </div>

好的，我已经添加了没有PHP的标记，所以应该更容易看到。这两种解决方案在实践中似乎都行不通。顶部和底部的文本不能居中，图像应该在其容器div中居中。容器有溢出隐藏，所以我想看到图像的中心，因为这通常是焦点所在。

当前回答

我要大胆地说，以下是你想要的。

注意，我认为问题中不小心遗漏了以下内容(见评论):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

所以你需要的是:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

2012-06-12 01:37:30

其他回答

您可以使用flex box以最少的代码对齐您的内容

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container { 宽度:100%; 背景:绿色; 显示:flex; justify-content:中心; 对齐项目:中心; } < div class = "图像容器" > <img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> < / div >

Js小提琴链接https://jsfiddle.net/7un6ku2m/

2016-12-19 12:57:40

这就是我最后做的:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

这将限制图像高度为600px，并将水平居中(如果父宽度较小，则向下调整大小)到父容器，保持比例。

2015-04-28 08:40:11

将图片放入newDiv中。使包含div的宽度与图像相同。适用余量:0自动;到newDiv。这将使div位于容器的中心。

2016-02-22 05:21:02

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

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

2012-06-12 00:46:19

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

缩放到图像的中心(图像填充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;
    }

2016-03-24 08:42:41

如何在一个div元素水平中心图像?

推荐文章

最新文章

标签