Question

当我不知道图像的高度是多少时，如何用css垂直居中图像？图像以及高度将由服务器在运行时提供，并且可以是任意数量的高度。知道了这一点，我在div中创建了一个div，或多或少遵循此处教程的方法1：http://phrogz.net/css/vertical-align/。但是，只有当你知道你试图集中的内容的高度时，这才有效。那么我究竟如何垂直居中呢：

<div class="galleryItem">
    <a href="wherever">
    <img src="whatever" width="173" height="155">
       <div class="galleryTitle">
           <div class="galleryImg">
               <img src="centerMeVertically.jpg">
           </div>
       </div>
    </a>
</div>

这是失败的CSS：

   .galleryItem {
    float: left;
    border-style: solid;
    border-width: 1px;
    border-color: #b78e18;
    margin: 7px 4px;
    padding: 5px;
    width: 173px;
    height: 190px;
    position: relative;
}

.galleryTitle {
    height: 33px;
    width: 173px;
    position: relative;
}

.galleryImg {
     width: 173px;
     height: 30px;
     position: absolute;
     top: 50%;
     margin-top: -15px;
 }

.galleryImg > img {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

Answer 1

表格单元格能够将其内容与垂直中心对齐。因此我们需要通过将div的'display'属性更改为'table cell'来将div的行为更改为table-cell。

现在请查看下面的代码，看到相应div中的图像垂直对齐到中心。

.galleryImg {
   display: table-cell;
   height: 60px;
   vertical-align: middle;
   width: 173px;
}

希望它会对你有所帮助。

Answer 2

// JQuery的

$(function(){
    // vertical align images
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();        
            var mh = Math.ceil((ph-ah) / 2); //var mh = (ph - ah) / 2;
            $(this).css('margin-top', mh);
            //console.log(mh);
        });
    };
    $('.galleryItem img').vAlign();
});

Answer 3

以下是实例，如何将图像居中到任何div 美化有一些额外的CSS，但你可以忽略它

http://jsfiddle.net/pratswinz/vCBnD/

<div class="span2 cen_eventspan2">
            <figure class="span12 cen_event">
                <img class="img-polaroid-user" src="https://www.dropbox.com/s/j4x8plvaupv0ftp/AC_Feedback-box-buttons_unlcear_b.png" />
            </figure>
        </div>

/ ----------------- CSS -------------------- /

.cen_event {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 172px;
    line-height: 159px;
    padding: 4px;
    text-align: center;
    width: 182px;
}
.cen_event .img-polaroid-user {
    max-height: 160px;
    max-width: 172px;
    vertical-align: middle;
    border:1px solid #f00;

}

Answer 4

我首先计算容器和图像之间的高度差异，然后将其除以两个并使其成为边缘顶部

requiredMargin =（containerheight-imageheight）/ 2

你可以通过JS或服务器方面做到这一点，甚至可以更好地处理人们因任何原因关闭JS的情况。

.galleryImg img {margin-top:<requiredMargin>px;}

这是一种可行的方法。

OR，CSS3方式

如果您只想使用CSS并且只支持最新的浏览器，那么您可以考虑使用Flexbox：

<div class="imageContainer">
    <img src="http://placehold.it/350x100">
</div>

<style>
.imageContainer {
   height:300px;
   display: -webkit-box;
    -webkit-box-align: center;
   display: -moz-box;
   -moz-box-align: center;
   display: -ms-flexbox;
   -ms-box-align: center; 
   display: box;
   box-align: center; 
}
</style>

http://jsfiddle.net/gp5Ry/1/

要支持旧版浏览器，您可以考虑使用Flexie。虽然我自己没有使用它，但它似乎是一个不错的选择。

Answer 5

在div上使用表格显示属性。它不漂亮，但它有效。

http://jsfiddle.net/staircasebug/dv9RS/

.galleryTitle {
display: table;
width: 100%;
height: 300px;
background: #eee;
}

.galleryImg {
display: table-cell;
vertical-align: middle;
}

img {
margin: 0 auto;
display: block;
}

Answer 6

将以下内容添加到css;

垂直对齐：中央;或vertical-align：middle;

如何垂直居中可以在div中改变大小的图像？

6 个答案: