我需要将一个元素(垂直和水平)居中,当我知道它的宽度时,它的高度可能会发生变化。
我整个上午都在搜索谷歌,我发现的一切似乎都说我需要知道高度。
是否有我可以使用的jQuery方法,我真的不想开始使用table-cell
属性
答案 0 :(得分:1)
您可以阅读这篇关于使用div标签进行垂直居中的小文章。 看一下这个链接http://www.jakpsatweb.cz/css/css-vertical-center-solution.html 并检查这个类似的问题 How to vertically center a div for all browsers?
答案 1 :(得分:0)
您可以使用jQuery.outerHeight动态获取元素的高度属性。
答案 2 :(得分:0)
你可以使用:
$("#whatever").height();
它会告诉你物体的高度。如果它发生了变化,那么你可以再次调用它并重新居中。
答案 3 :(得分:0)
使用CSS可以使用flexible boxes,但它还不适用于IE:
.container{
display: flex;
min-height: 100%; /* <- or whatever height the container has */
}
.centered{
margin: auto;
}
答案 4 :(得分:0)
你不需要任何js 这很简单
*请注意,这将适用于img like object,其高度和宽度已修复,但我们不知道,对于文本,您需要使用js正确地跨浏览器运行它
看看这个小提琴http://jsfiddle.net/Ukvfw/ 和较小的图像相同的代码http://jsfiddle.net/Ukvfw/1/
这是代码
html - (您可以更改图片链接并尝试任何高度和宽度)
<div class="parent">
<img class="child" src="http://wiki.guildwars.com/images/thumb/6/60/User_Jette_awesome.svg/2048px-User_Jette_awesome.svg.png" />
</div>
css -
.parent{
width:300px;
height:300px;
position:relative;
border:1px solid red;
padding:10px;
}
.child{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
max-height:300px;
max-width:300px;
}
答案 5 :(得分:0)
<table style="width: 100%; height:100%;">
<tr>
<td style="text-align: center; vertical-align: middle;">
/*code here*/
</td>
</tr>
</table>
我认为这是最“一般和全地形”的方式。