首页 > Web开发 > 详细

css学习笔记三

时间:2015-10-10 01:39:42      阅读:220      评论:0      收藏:0      [点我收藏+]

   总结一下水平居中和垂直居中的方法,欢迎交流指正,共同进步!

 

 1.水平居中

   1.1):行内元素水平居中,在其父类设置text-align:center;

  

   1.2): 块级元素水平居中有三种

   第一种:定宽的块级元素,可以设置margin:0 auto;

 

   第二种:不定宽的块级元素 可以通过设置display:inline,转换成行内元素,再设置text-align:center;

 

   第三种:不定宽的块级元素  可以通过对其父元素设置float:left;position:relative;left:50%,子元素设置position:relative;left:-50%;实现水平居中

 

2.垂直居中

  2.1)父级高度确定的单行文本

      可以通过设置行高line-height与高度一致,实现垂直居中

     2.2)父级高度确定的多行元素

    可以通过设置

  <table>

    <tbody>

              <tr>

                  <td>需要居中的元素</td>

             </tr>

           <tbody>

     </table>

     2.3)父级高度确定的多行元素

     可以通过设置display:table-cell来激活vertical-align,再对其设置属性middle

css学习笔记三

原文:http://www.cnblogs.com/kevoin/p/4865607.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!