最新公告
  • 欢迎您光临我的主题网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • CSS 上下居中的方法总结

    <center>在CSS里不好使了,在CSS里 解决上下居中问题又能支持both IE和Firefox的有3种方案:

    第一种,上下居中文字:
    方法是使用line-height,因为line-height就是用来定义文字行与行之间的距离,所以定义文字框的line-height等于框的高度可以让文字上下居中.

    h1 {  
       font-size: 3em;  
       height: 100px;  
       ;  
       }

    需要注意的是:如果中间的文字不只一行,并且使用分行显示的时候,这个就不好用了.

    第二种,非文字的上下居中:
    使用absolute positioning,需要注意的是这个方法只能在框有定义好的高度才能工作. 不适合动态高度的框.
    假如代码为:

    Hi, I'mVertically Aligned
    Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua.

    要上下居中 CSS编写为:

          .vert {
    width: 580px;
    height: 190px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -95px 0 0 -290px;
            }

    上边的margin计算公式为:

            * Width of Element / 2 = Negative Left Margin
            * Height of Element / 2 = Negative Top Margin

    第三种方法:

    Content here#floater{float:left; height:50%; margin-bottom:-120px;}#content{clear:both; height:240px; position:relative;}

    相关学习推荐:css教程

    以上就是CSS 上下居中的方法总结的详细内容,更多请关注我的主题网其它相关文章!

    高端网页前端主题模板设计,覆盖各大开源程序主题,一站式在线选购平台
    我的主题网 » CSS 上下居中的方法总结
    • 136会员总数(位)
    • 78资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 566稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级