垂直对齐img内浮动div

有5浮动div s使用Javascript将高度拉伸到document高度的100％。它们全部5个包含img元素。垂直对齐img内浮动div

<!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; 
    }

我试过设置父母的divdisplay: table和imgdisplay: table-cell, vertical-align: middle但没有运气。定义margin-top: 50%正在采取任何行动，但预期。

JSFIDDLE HERE!!!

任何帮助表示赞赏。
谢谢！

来源

2012-02-14 daniel.tosaba

为什么不使用display：inline-block;而不是浮动？然后，您可以使用垂直对齐直到您的心脏的内容。 – joshnh 2012-02-14 04:44:48

已经尝试过，但没有成功。尝试编辑我的JSFIDDLE并检查它自己。谢谢 – 2012-02-14 04:51:28

另外，如果您打算使用'display：inline-block;'''''''''''''''''''''#wrapper div''， _ _即全部在一条线上或没有缩进 – Hawken 2012-02-14 23:33:54

您可以绝对定位它们，然后设置top: 50%和margin-top: -63px。当然，这只有在你知道图像的高度（你的案例中的126px）时才有效。如果图像大小是动态的，最简单但不可行的方法是在加载后使用js在图像上设置边缘顶部。

总之，静态方法可以在这里看到：http://jsfiddle.net/3gqcS/2/

来源

2012-02-14 04:49:03

这一款最适合我！谢谢大家！！！ – 2012-02-14 05:59:37

尝试将列：

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%;}

代替。

从得知：因为你使用JavaScript和jQuery（不能没有他），你可以做http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

来源

2012-02-14 04:56:41 Hawken

它不起作用，但我喜欢你的'非js-height-set-trick'。谢啦！！！ – 2012-02-14 06:00:52

你使用哪种浏览器，它不起作用？ @ daniel.tosaba – Hawken 2012-02-14 12:02:51

对齐方式不起作用。但浏览器技巧真棒。使用最新的Chrome＆firefox – 2012-02-14 19:53:56

....

检查：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); 
    } 
}

来源

2012-02-14 04:58:47 ygaradon

谢谢你！好的Javascript代码！谁知道你的？欢呼的人！ – 2012-02-14 06:03:11

这有点脏，但你可以将div的行高设置为div高度+图像高度，然后溢出：hidden

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

来源

2012-02-14 05:03:28 rikitikitik

这是一个讨厌的小黑客，我喜欢它。谢啦！！ – 2012-02-14 06:02:11

垂直对齐img内浮动div

回答

相关问题