在浮动div中垂直对齐img

Question

有5个浮动的div使用Javascript将高度拉伸到document高度的100％。 所有5个都包含img元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
    <div id="wrapper">
        <div id="static"><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
        <div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
        <div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
        <div><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
        <div class="clear"><img src="http://www.rs.dhamma.org/wheel.gif"/></div>
    </div>
</body>
</html>

使用Javascript：

//sets columns height to 100%;
function colsHeight(){
        var docHeight = $(document).height();
        $("#wrapper div").height(docHeight);
};

$(document).ready(function(){
    colsHeight();
    });

和CSS：

*{
    margin: 0;
    padding: 0;    
    }

#wrapper{
 width: 1000px;
 margin: 0 auto;    
    }

    #wrapper div{    
        padding: 0 20px;
        background-color: #9F81F7;        
        float: left;
        border-right: 1px solid black;
    }
    #wrapper img{

    }

div.clear:after{
    content: " ";
    clear: both;
    }

我已经尝试设置父级的div display: table和img display: table-cell, vertical-align: middle但没有运气。 定义margin-top: 50%表现出任何预期。

JSFIDDLE在这里！

任何帮助赞赏。
谢谢！

Answer 1

您可以绝对定位它们，然后设置top: 50%和margin-top: -63px 。 当然，这只有在您知道图像的高度（在您的情况下为126px ） 126px 。 如果图像大小是动态的，最简单但令人讨厌的方法是在加载后使用js在图像上设置margin-top。

无论如何，静态方法可以在这里看到： http ： //jsfiddle.net/3gqcS/2/

Answer 2

因为你使用javascript和jQuery（不能没有他）你可以做....

检查一下： http ： //jsfiddle.net/828pW/

这是代码：

function verticalAlignImage(img)
{
    if(img.height)
    {

        $(img).css({
            position:'absolute',
            top: ($(img).parent().height() - img.height)/2
        }).parent().css('position', 'relative');

    }
    else 
    {
        setTimeout(function(){

            verticalAlignImage(img);
        }, 100);
    }
}

Answer 3

这感觉有点脏，但你可以将div的line-height设置为div height + image height然后overflow：hidden

<div id="static" style="height: 481px; line-height: 607px; overflow: hidden;">

Answer 4

尝试设置列：

    position:relative;
    width:<width>;/* width must be set */

和图像：

    position:absolute;
    top:0;
    bottom:0;
    margin:auto 0;

这应该完美地居中，然后你需要设置列宽，因为绝对定位的图像根本不占用任何空间。

另外，不要使用java脚本，只需添加：

    html, body, #wrapper, #wrapper div{height:100%;}

代替。

从以下网站获取： http ： //www.tutwow.com/htmlcss/quick-tip-css-100-height/

在浮动div中垂直对齐img

问题描述

4 个解决方案

解决方案1
2 已采纳 2012-02-14 04:49:03

解决方案2
2 2012-02-14 04:58:47

解决方案3
2 2012-02-14 05:03:28

解决方案4
1 2012-02-14 04:56:41

在浮动div中垂直对齐img

问题描述

4 个解决方案

解决方案1 2 已采纳 2012-02-14 04:49:03

解决方案2 2 2012-02-14 04:58:47

解决方案3 2 2012-02-14 05:03:28

解决方案4 1 2012-02-14 04:56:41

解决方案1
2 已采纳 2012-02-14 04:49:03

解决方案2
2 2012-02-14 04:58:47

解决方案3
2 2012-02-14 05:03:28

解决方案4
1 2012-02-14 04:56:41