0

经过几个小时试图自己解决这个问题后，我觉得有必要求助于比我更了解的人。我有一个在父 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/

4

2 回答 2

1

这对你有用吗？

我所做的只是编辑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...

于 2013-10-05T07:09:22.560 回答
1

如果您仍然需要javascript，这是我的解决方案...您可以使用此绑定在每次更改时获取高度，那么您应该能够创建一个算法来管理css。

JS：

$('#inner').bind('getheight', function() {
    $('#inner').height();
});
于 2013-10-05T07:17:38.643 回答