Question

经过几个小时的尝试自己解决这个问题，我觉得有必要求助于比我更了解的人。我有一个函数，将父div中的子div居中。这一切都是唯一的问题是子div的大小变化所以我需要一种方法将这个函数单独应用到每个div。

这是我的代码

HTML

<div class="outer">
<div class="inner">short text in here</div>
</div>

<div class="outer">
<div class="inner">some text in here more text here that is longer. This is longer</div>
</div>

CSS

.outer{background:#eee;height:150px;width:150px;margin-bottom:20px;}
.inner{width:130px;padding:10px;text-align:center;}

JAVASCRIPT

$(document).ready(function(){
var inner = $('.inner'),
ht = inner.height();

inner.css({'position':'absolute','top':'50%','margin':-ht/2+'px 0 0 0'});
});

http://jsfiddle.net/AMNVY/

Answer 1

Does this work for you?

我所做的就是编辑css：

.outer{
    background:#eee;
    height:150px;
    width:150px;
    margin-bottom:20px;
    display: table;
}
.inner{
    width:130px;
    padding:10px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;

}

不需要js ......

Answer 2

如果你仍然需要javascript这里是我的解决方案...你可以使用这个绑定每次更改时获得高度，然后你应该能够创建一个算法来管理CSS。

JS：

$('#inner').bind('getheight', function() {
    $('#inner').height();
});

将javascript垂直中心应用于多个div

2 个答案: