加载中…
正文 字体大小:

CSS | DIV 水平和竖直方向居中

(2017-05-10 23:07:48)
标签:

365

1.竖直方向:

最近做个小页面遇到了点麻烦:需要设置元素的竖直方向居中。

以往的经验:

 

[css] view plain copy
  1. displayinline-block 
  2. vertical-alignmiddle 

就可以解决。但是这次不行,很奇怪,不知道是高度变化的原因,还是用jquerymobile的问题,或者因为div嵌套在li 和 a 之间的问题。

 

解决办法:

table-cell 法:

 

[html] view plain copy
  1. <</span>div id="wrapper">  
  2.     <</span>div id="cell">  
  3.         <</span>div class="content">  
  4.             Content goes here  
  5.         </</span>div>  
  6.     </</span>div>  
  7. </</span>div>  

CSS:

 

 

[css] view plain copy
  1. #wrappe{display:table;}  
  2. #cell {display:table-cellvertical-align:middle;}  

参考:

 

1. http://blog.themeforest.net/tutorials/vertical-centering-with-css/

2. http://blog.jobbole.com/46574/


2.水平方向:

常规做法:

 

[html] view plain copy
  1. <</span>div id="parent">  
  2.     <</span>div class="child">  
  3.     test  
  4.     </</span>div>  
  5. </</span>div>  

CSS:

 

 

[css] view plain copy
  1. #parent{text-align:center;}  
  2. .child{margin:0 auto;}  

即可。

 

 

不能水平居中的解决办法:http://blog.csdn.net/gxp_java/article/details/8675559

0

阅读 评论 收藏 转载 喜欢 打印举报
已投稿到:
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有