如何垂直对齐div在另一个div,无显示:table-cell [英] How to vertically align div inside another div without display:table-cell
问题描述
这是div结构。
< div class =DivParent>
< a href =#>
< div class =DivWhichNeedToBeVerticallyAligned>< / div>
< / a>
< / div>
DivParent有固定的宽度和高度值,但DivWhichNeedToBeVerticallyAligned没有固定的高度值。
如果你使DivParent显示:table-cell;您可以垂直对齐DivWhichNeedToBeVerticallyAligned,但是我不想使用该功能,因为它会导致一些混乱。
href标记链接应该与divParent i的大小相同divparent必须可点击。像显示:块。
所以有任何CSS方式的垂直对齐或轻量的jquery解决方案也将有所帮助。
< : http:/ / p> /jsfiddle.net/XHK2Z/
*
p>您可以使用额外的助手在具有固定高度的块中实现垂直对齐。
看看这个:http://jsfiddle.net/kizu/7Fewx/
您必须有一个帮手对齐:
.DivHelper {
display:inline-block;
vertical-align:middle;
height:100%;
}
并添加 display:inline-block; vertical-align:middle;
到 .DivWhichNeedToBeVerticallyAligned
Ok this is the div structure.
<div class="DivParent">
<a href="#">
<div class="DivWhichNeedToBeVerticallyAligned"></div>
</a>
</div>
DivParent has fixed width and height values but DivWhichNeedToBeVerticallyAligned does not have fixed height values.
If you make DivParent display:table-cell; you can vertically align DivWhichNeedToBeVerticallyAligned but i don't want to use that feature since it causes some mess.
A href tag link should be same size with the divParent i mean whole divparent has to be clickable. like display:block.
So are there any CSS way of vertically aligning or lightweight jquery solution would also help.
Thank you.
Here jsfiddle : http://jsfiddle.net/XHK2Z/
*
You can use an extra helper to achieve vertical alignment in a block with fixed height.
Look at this: http://jsfiddle.net/kizu/7Fewx/
There you must have a helper near a block you want to align with:
.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}
And add display: inline-block; vertical-align: middle;
to .DivWhichNeedToBeVerticallyAligned
这篇关于如何垂直对齐div在另一个div,无显示:table-cell的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!