1.竖直方向:
最近做个小页面遇到了点麻烦:需要设置元素的竖直方向居中。
以往的经验:
display: inline-block;
vertical-align: middle;
就可以解决。但是这次不行,很奇怪,不知道是高度变化的原因,还是用jquerymobile的问题,或者因为div嵌套在li 和 a 之间的问题。
解决办法:
table-cell 法:
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
CSS:
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
参考:
1. http://blog.themeforest.net/tutorials/vertical-centering-with-css/
2. http://blog.jobbole.com/46574/
2.水平方向:
常规做法:
<div id="parent">
<div class="child">
test
</div>
</div>
CSS:
#parent{text-align:center;}
.child{margin:0 auto;}
即可。
不能水平居中的解决办法:http://blog.csdn.net/gxp_java/article/details/8675559