4

当我不知道图像的高度时，如何使用 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;
 }
4

6 回答 6

3

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

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

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

希望它会帮助你。

于 2013-04-17T04:48:40.963 回答
1

//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();
});
于 2013-04-17T12:15:46.917 回答
1

这是现场示例，如何将图像居中到任何 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;

}
于 2013-04-18T05:43:22.850 回答
0

我会首先计算容器和图像之间的高度差是多少，然后将其一分为二并使其顶部边缘

requiredMargin=(容器高度-图像高度)/2

您可以通过 JS 来执行此操作，或者服务器端可以更好地处理人们出于任何原因关闭 JS 的情况。

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

这是一种可靠的方法。

或者，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。虽然我自己没有使用过，但它似乎是一个不错的选择。

于 2013-04-17T02:55:21.680 回答
0

在 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;
}
于 2013-04-17T03:23:08.367 回答
-3

在css中添加以下内容；

垂直对齐：中央；或垂直对齐：中间；

于 2013-04-17T02:36:53.320 回答