• 技术文章 >web前端 >html教程

    DIV内容垂直居中_html/css_WEB-ITnose

    2016-06-24 11:22:30原创913

    css垂直居中属性设置vertical-align: middle对div不起作用,例如:

     1  2  3  4  5  6 DIV垂直居中对齐 7 35 
    
    36 37
    38 39
    40 41

    运行后按钮没有在DIV中垂直居中:

    解决思路:如果div和按钮的宽高都确定为具体像素值,可以直接设定按钮的css属性:position:relative; top为(div.height - button.height)/2,left为(div.width-button.height)/2;否则给按钮添加一个div父元素,宽高和按钮相 同,position设定为relative,top和left都为50%(即左上角位置设定在外层div的中心),再将按钮左上角位置坐标设定为父元素 div宽高(也等于按钮自身宽高)的-50%

    详细代码如下:

     1  2  3  4  5  6 DIV垂直居中对齐 7 45 
    
    46 47
    48
    49 50
    51
    52 53

    再次运行后,div中按钮上下居中显示

    END

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:DIV内容垂直居中
    上一篇:动态dynamically变更母版_Layout页body标签css的class_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 如何向当前的html文档输入一段字符_html/css_WEB-ITnose• 引入外部CSS的两种方式及区别_html/css_WEB-ITnose• 实现主页_基本架构实现• 面向对象_基于组合和动态原型• 补充原型的一部分小知识
    1/1

    PHP中文网