在浮动的div中垂直对齐图片

Question

在浮动的div中垂直对齐图片

3

有5个浮动的 div，它们的高度使用Javascript被拉伸到100%的document高度。所有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;
    }

我已经尝试过将父元素的

设置为"display:table"，并将设置为"display:table-cell, vertical-align:middle"，但没有成功。定义"margin-top: 50%"的效果与预期完全不同。

JSFIDDLE在这里!!!

非常感谢您的任何帮助。
谢谢！

- daniel.tosaba

为什么不使用display: inline-block;代替浮动呢？这样您可以放心地使用垂直对齐。 - joshnh

已经尝试过了，但没有成功。请尝试编辑我的JSFIDDLE并自行检查。谢谢。 - daniel.tosaba

另外，如果您计划使用 display:inline-block;，则必须在 #wrapper div 之间不留空格。即全部放在一行或不缩进。 - Hawken

4个回答

2

这种做法有些不规范，但你可以将div的行高设置为div高度+图片高度，然后再设置overflow:hidden

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

- rikitikitik

2

你可以将它们绝对定位，然后设置top: 50%和margin-top: -63px。当然，这只适用于你知道图像的高度（在你的情况下为126px）。如果图像尺寸是动态的，最简单但不太好的方法是在加载后使用js为图像设置margin-top。

无论如何，静态方法可在此处查看：http://jsfiddle.net/3gqcS/2/

- Christian

1

尝试设置列：

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

并且将图像作为：

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

这样可以完美地将它们居中，但是您需要设置列宽，因为绝对定位的图像根本不占用空间。

此外，不要使用JavaScript，只需添加：

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

替代方案。

学自：http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

- Hawken

你使用什么浏览器，它不工作？@daniel.tosaba - Hawken

对齐方式不起作用，但浏览器技巧很棒。使用最新的Chrome和Firefox。 - daniel.tosaba

@daniel.tosaba，我刚刚制作了一个对我有效的演示；你能看到吗？http://jsbin.com/iworeh 编辑更新链接 - Hawken

那时我的代码肯定有些问题，影响了它的运行。我会去看一下的。这是一个很棒的技巧。 - daniel.tosaba

我在发布后进行了编辑，添加了 margin:auto;，所以你可能是在那之前尝试的。祝好运。 - Hawken

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ygaradon · Accepted Answer

既然您正在使用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);
    }
}