如何在一个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中居中。容器有溢出隐藏，所以我想看到图像的中心，因为这通常是焦点所在。

当前回答

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

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

2012-06-12 00:46:19

其他回答

CSS flexbox可以用图像父元素的justify-content: center来实现。为了保持图像的纵横比，添加align-self: flex-start;到它。

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

输出:

body { background: lightgray; } .image-container { width: 200px; display: flex; justify-content: center; margin: 10px; padding: 10px; /* Material design properties */ background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .image-2 { width: 500px; align-self: flex-start; /* to preserve image aspect ratio */ } .image-3 { width: 300px; align-self: flex-start; /* to preserve image aspect ratio */ } <div class="image-container"> <img src="http://placehold.it/100x100" /> </div> <div class="image-container image-2"> <img src="http://placehold.it/100x100/333" /> </div> <div class="image-container image-3"> <img src="http://placehold.it/100x100/666" /> </div>

2015-12-10 13:04:37

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

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

2015-03-25 03:37:43

这个也可以

#imagewrapper {
    text-align:center;
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px;
}

2014-10-06 11:13:26

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

2018-02-15 11:49:20

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

缩放到图像的中心(图像填充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元素水平中心图像?

推荐文章

最新文章

标签