在各种div的中间垂直对齐文本
在各种div的中间垂直对齐文本
提问于 2011-05-13 01:29:43
嗨，我在一个不同大小的div中的图片下面有一些文本，文本已经是水平居中的，但我想使用jquery将这个文本垂直居中和水平居中。
我该怎么做呢？
下面是示例页面
http://satbulsara.com/luke-irwin/?page_id=175
谢谢,
Sat
回答 2
Stack Overflow用户
发布于 2011-05-13 01:55:30
这里有一个例子和一个如何垂直居中的小提琴：http://jsfiddle.net/9Aqd8/
<div style="height:120px; width:120px; border: 1px solid black">
<div class="textToAlign" style="text-align:center; width:100%">Text</div>
<div>
$(function() {
$('.textToAlign').each( function( index, item) {
var parent = $(item).parent();
var $this = $(item);
parent.css('position', 'relative');
$this.css('position', 'absolute').css('top', Math.round((parent.height() - $this.outerHeight()) / 2) + 'px');
});
});Stack Overflow用户
发布于 2011-05-13 01:48:29
CSS解决方案：
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
JQuery解决方案：
a.将所有框的HTML结构更改为：
<div class="wp-caption alignnone">
<div class="imageContainer">
<img class="new geometric ikat" title="Rug-3" src="http://satbulsara.com/luke-irwin/wp-content/uploads/2011/05/Rug-31.jpg" alt="" width="308" height="409" />
</div>
<p class="wp-caption-text">Testing 4</p>
</div>b. JQuery代码：
var maxHt = 0;
var $containers = $('div.imageContainer');
$containers.each(function(){
var ht = $(this).height();
if (ht > maxHt) {
maxHt = ht;
}
});
$containers.height(maxHt);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5981980
复制相关文章
相似问题
腾讯云开发者
